webpack is a popular front-end project construction tool (packaging tool) that can solve the dilemma faced in web development.
webpack provides friendly modular support, as well as code compression and confusion, handling JS compatibility issues, performance optimization and other powerful functions, thereby Let programmers focus on the realization of functions, improve development efficiency and maintainability of the project
1. Package.json file initialization
①: Create a blank directory for the project, and run the npm init -y command to initialize the package management configuration file package.json
②: Create a new src source code directory
③: Create a new src -> index.html Home
④: Initialize the basic structure of the home page
⑤: Run npm install jquery -S command to install JQuery
⑥: Through the form of modularization, the effect of interlacing the color of the list is realized
2: Webpack-cli initialization
[Version 5 webpack is not compatible with version 4 cli and will report an error]
①: Run the npm install webpack webpack-cli -D command to install webpack-related packages
②: Create a webpack named webpack.config.js in the project directory Configuration file
③: In the webpack configuration file, initialize the following basic configuration
module.exports = { mode: “development” // mode is used to specify the build mode } ④: Add dev under the scripts node in the package.json configuration file The script is as follows: "scripts": { "dev": "webpack" // The script under the script node can be executed through npm run } ⑤: Run the npm run dev command in the terminal to start webpack for project packaging
[When the packaging is completed, the packaging file is automatically generated in dist, and main.js is automatically generated in dist, and the entry file: index.js in src]
3: Modify the package entry file and output file
The packaged entry file is src -> index.js and the
packaged output file is dist -> main.js
If you want to modify the package entry and exit, you can add the following configuration information in webpack.config.js:
const path = require('path');
module.exports = { entry: path.join(__dirname,'./src/index.js'), // The path of the package entry file output: { path: path.join( __dirname,'./dist'), // The storage path of the output file filename:'bundle.js' // The name of the output file } }
4: webpack-dev-server automatic packaging
webpack automatically packs [automatically modify after modification] memory generates bundle.js file
① Run the npm install webpack-dev-server -D command to install tools that support automatic project packaging
② Modify the dev command in package.json -> script as follows:
③ "script": { "dev": "webpack-dev-server ”// The script under the script node can be executed through npm run } ④ Modify the reference path of the script script in src -> index.html to /bundle.js ⑤ Visit http://localhost:8080 in the browser Note: webpack-dev-server will start a real-time packaged http server . The output file generated by webpack-dev-server is placed in the project root directory by default, which is virtual and invisible.
5: Configure html-webpack-plugin to generate preview page
①: Run the npm install html-webpack-plugin -D command to install the plug-in that generates the preview page
②: Modify the header area of the webpack.config.js file, add the following configuration information
// Import the plug-in that generates the preview page, and get a constructor
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin(( // Create an instance object of the plug-in
template:'./src/index.html', // Specify the template file to be used
filename: 'index.html' // Specify the name of the generated file. The file exists in memory and will not be displayed in the directory
})
③: Modify the configuration object exposed to the outside in the webapck.config.js file, and add the following configuration nodes :
Module.exports = { plugins: [htmlPlugin] // The plugins array is a list of some plugins that will be used during webpack packaging }
6: Automatic configuration of packaging related parameters
// Configuration in package.json
// --open --host configure IP address --port configure port
"scripts": { "dev": "webpack-dev-sever --open" // automatically open the browser }
"Scripts": { "dev": "webpack-dev-server --host 127.0.0.1 --port 8888" // automatically open 127.0.0.1:8888 }
2.3 Loaders in webpack
1： 通过 loader 打包非 JS 模块
In actual development, webpack can only package and process modules ending with js suffix by default, and other modules ending with non-js suffix names
can not be processed by default . Webpack needs to call the loader to package normally, otherwise an error will be reported
Loader loader can assist webpack in packaging and processing specific file modules, such as:
less-loader packaging and processing .less related files
sass-loader packaging and processing .scss related files
url-loader packaging and processing css files related to url path
1: css-loader packs and processes css files
①: Run the npm i style-loader css-loader -D command to install the loader that processes the css file.
②: In the module -> rules array of webpack.config.js, add the loader rules as follows:
// All third-party file modules Matching rules:
module: { rules: [ {test: /\.css$/, use: ['style-loader','css-loader']} // The regular expression in the front, and the loader used in the back ] }
③: Import the file import'./css/01.css' in index.js [index.html does not need to import files]
2: less-loader packs and processes less files
①: Run the npm i less-loader less -D command [less-loader trusts less]
②: Add to the module -> rules array in webpack.config.js, and add the rules as follows
③: module: { rules: [ {test : /\.less$/, use: ['style-loader','css-loader','less-loader']} ] } ④: Import the file import'./css/01. less'
3: sass-loader packs and processes scss files
In webpack.config.js, use: is sass-loader
①: Run the npm i sass-loader node-sass -D command
②: In the module -> rules array of webpack.config.js, add the loader rules as follows
③: module : { rules: [ {test: /.scss$/, use: ['style-loader','css-loader','sass-loader']} ] }
4: Configure postCSS to automatically add css compatible prefix
①: Run the npm i postcss-loader autoprefixer -D command to install
②: Create the postcss configuration file postcss.config.js in the project root directory, and initialize the configuration
const autoprefixer = require('autoprefixer') // Import the automatically prefixed Plug-in
module.exports = { plugins: [autoprefixer] } ③: In the module -> rules array of webpack.config.js, modify the css loader rules as follows: module: { rules: [ {test: /\.css$/ , use: ['style-loader','css-loader','postcss-loader']} ] }
5: url-loader packs pictures and font files in the style sheet
①: Run the npm i url-loader file-loader -D command
②: In the module -> rules array of webpack.config.js, add the loader rules as follows:
module: { rules: [ {test: /\.jpg|png |gif|bmp|ttf|eot|svg|woff|woff2$/, use:'url-loader?limit=126976} ] }
After? Is the parameter item of loader,
limit is used to specify the size of the picture, the unit is byte (byte), only pictures smaller than the limit size will be converted to base 64 pictures, otherwise it will not be converted to base64
6: Package processing of advanced syntax in JS files
{For example, if some objects are defined in index.js, an error will be reported}
①: Install the package related to the babel converter npm i babel-loader @babel/core @babel/runtime -D
②: Install the package related to the babel syntax plugin: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
③: In the project root directory, create the babel configuration file babel.config.js and initialize the basic configuration as follows:
module.exports = { presets: ['@babel/preset-env '], plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties'] } ④: In the module -> rules array of webpack, config.js, add the loader rule As follows: // exclude is a queued item, which means that babel-loader does not need to process js files in node_modules [System js] {test:'/\. js $/, use:'babel-loader', exclude: /node_modules/}