Witajcie!
Mam problem. Piszę sobie coś w js, korzystam z webpacka. Gdy uruchomię go jako webpack-dev-server wszystko działa tak jak powinno. W ten sposób też pisałem całą "apkę" coby było wygodniej. Dzisiaj chciałem wygenerować plik bundle.js nie do pamięci, tylko "normalnie" (xD), tak aby móc to uruchomić bez odpalania serwera lokalnie.
Może nieco prościej...
w pliku package.json miałem linijkę "start": "webpack-dev-server ./src/scrable.js"
Po wpisaniu w CMD polecenia "npm start" uruchamiał się serwer lokalny i cała apka działała tak jak powinna - tutaj dowody:
Aby wygenerować plik bundle.js "na stałe" zmieniłem tą linię w pliku package.json na "start": "webpack ./src/scrable.js ./bundle.js"
Co ciekawe, uruchomienie polecenia "npm start" nie przynosi błędów, mimo, że problem jest... Po uruchomieniu pliku index.html aplikacja zachowuje się inaczej niż powinna. Plik bundle.js rzeczywiście się wygenerował, znajduje się tam gdzie powinien, a mimo tego, po wejściu w "zbadaj element" w przeglądarce mam następujący problem:
Sprawa jest bardzo dziwna, bo apka w teorii działa, ale tylko częściowo, co widać zresztą na powyższym screen'ie. Niby elementy reagują na naciśnięcie, ale nie zachowują się tak jak powinny.
Tutaj zawartość pliku package.json:
{
"name": "jstest_",
"version": "1.0.0",
"description": "",
"main": "scrable.js",
"scripts": {
"start": "webpack ./src/scrable.js ./bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
a tutaj zawartość pliku webpack.config.js:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/scrable.js",
output: {
path: __dirname,
filename: "bundle.js",
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
};
A tutaj screen po uruchomieniu webpacka, gdy ma zadziałać "lokalnie":