npm install npm@latest -g
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
npm install --save-dev babel-loader babel-core babel-preset-env
npm install sass-loader node-sass --save-dev
npm install style-loader css-loader --save-dev
npx webpack --config webpack.config.js
npm install webpack-dev-server --save-dev
//config some code in package.json file
"scripts": {
"start:dev": "webpack-dev-server"
}
and in the shell to run
npm run start:dev
//config hot update
https://webpack.js.org/guides/hot-module-replacement/
--------------
webpack.config.js file conofigure
/* === dont forget to import scss to main.js file === */
/* ===> import './main.scss'; <=== */
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/dist"
},
module: {
rules: [
{
test: /.js$/,
use: {
loader: "babel-loader",
options: { presets: ["es2015"] }
}
},
{
test: /.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
}
};
hot module replacement: