Global install first:
npm i webpack webpack-cli -g
Initialize in working folder
npm init -y
A package.json file will appear
Create a new configuration file in the working folder root, js format
webpack.config.js
Write in configuration file
var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); //Auto import plug-in module.exports = { mode:"development", //development environment //Entrance entry:path.join(__dirname,'./src/main.js'), /*Exit*/ output:{ path:path.join(__dirname,'./dist'), filename:"bundle.js" }, /*A plug-in is an array. All plug-ins are required by a constructor */ plugins:[ new HtmlWebpackPlugin({ template: path.join(__dirname,'./src/index.html'), filename: "index.html" }) ], //Configuration module /************************************************** *Module, to convert files of other file formats into modules, the corresponding loader is required * Different files need different loader s * css-loader Converting css files to modules * style-loader Insert css module into web document * loader The execution sequence is from right to left * *************************************************/ module:{ rules:[ {test:/\.css$/,use['style-loader','css-loader']}, {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //Configure picture support {test:/\.(png|jpg|gif|webp|jpeg)$/, use:[{ loader:"url-loader", options: { limit: 1024, //Picture less than 1K to best 64 // name:'[path][name]-[hash:5].[ext]' name:'[name].[ext]' }, //Configure ES6 to ES5 {test:/\.js$/,use:['babel-loader'],exclude:[/node_modules/,/dist/]} ] } }
Download plug-ins and module collections
npm i html-webpack-plugin -D
npm install sytyle-loader css-loader -D //css support module
npm install less less-loader -D //less support module
npm install url-loader file-loader -D //Picture support module
The module needs to be configured in the configuration file webpack.config.js as shown above
The image module loader will convert the image to best64. If there are many large images, it will consume a lot of memory. Therefore, there is a limit of 1024,
Compatibility handling
Configure ES6 to ES5
npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D
There is also another configuration file. babelrc
{ "presets": ["env","stage-0"], "plugins": ["transform-runtime"] }
How do we use it?
Hot update requires downloading a plug-in
npm install webpack-dev-server -D
Now go back to the package.json file configuration
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --port 8888 --hot --open " },