(1) Install webpack
npm init -y initialize default template project
//Note: The folder name and project name cannot be called webpack, otherwise the installation will be refused
npm install --save-dev webpack Abbreviation: (npm i -D webpack) Install webpack
npm i webpack webpack-cli -D //Install webpack webpack-cli development dependencies
2). Run webpack
1).npx webpack //Execute the script command webpack
2).Add scripts in package.json:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", //" "build" is the command to use npm run command name: "webpack-cli" to actually execute the script program "build": "webpack-cli" // execute with npm run buildld. } npm run build actually executes the script program webpack-cli ( 3). Configure webpack 1). Create a new webpack.config.js in the current project. The default location 2). Create a new src/index.js in the current project. The src directory is the source code development folder. The directory index.js needs to be packaged The source code entry will package all dependent modules in the entry, build a dependency graph, and package all dependent files in turn. webpack optimizes the code flow. 3). There can be multiple entries (multi-entry) in a webpack packaging project. Webpack configuration The file can be modified at the location you want.The location of the configuration file can be modified by the command --config; ---- move webpack.config.js to the config/ folder
1).npx webpack --config=config/webpack.config.js
2).If it is an npm script, modify the webpack-cli --config=config/webpack.config.js inside the package.json scripts
Note: In the webpack command You can use --config to specify the location of the configuration file.
----
(4). Loader uses
webpack to package js code by default. To package other types of files, loader support is required.
1). css-loader style-loader Generally,
css-loader is used together to support webpack to load css
style-loader can write css to web pages
Installation:
npm i css-loader style-loader -D
Configuration:
module:{//module
rules:[//rules
{ //An object is loader loading a rule
test:/\.css$/, //Regular expression, means to match files ending with .css
//Indicates that files matched by test are processed by style-loader and css-loader
//loader has a different order, the order of execution is from right to left, from bottom to top, loader evaluates/executes from right to left (or bottom to top) use:["
style- loader","css-loader"]
//loader is configurable, the configuration loader is written in the form of an object
}
]
}
2).less-loader is used to load and compile less files
Installation:
npm i less less-loader style-loader css-loader -D;
npm i less less-loader -D;
configuration:
module:{ rules:[ {//less-loader configuration test:/\.less$/, //files ending with less use:[" style-loader", "css-loader", "less-loader"] } ] } 3).sass-loader is used to load and edit sass files installation:
npm i node-sass sass-loader style-loader css-loader -D
npm i node-sass sass-loader -D
configuration:
{//sass-loader configuration
test:/\.scss$/, //configure loader processing to The file at the end of .scss
use:["style-loader","css-loader","sass-loader"] }
4
). url-loader file-loader is used to package image files.
url-loader depends on file-loader , you can configure the image of the specified size to be packaged in base64 format. If the image is larger than the specified size, it will be packaged into a file.
file-loader package file.
Installation:
npm i url-loader file-loader -D
configuration:
{//url-loader Configure
test:/\.(jpe?g|png|gif|webp)$/,
use:[{ loader:"url-loader", options:{
//If the picture is smaller than 8000byte = 8k, it will be packaged as base64
//Otherwise, it will be packaged as a picture
limit:8000
}
}]
}
If you want to pack the html file
(1) Install the plugin npm i html-webpack-plugin -D
(2) const HtmlWebpackPlugin=require("html-webpack-plugin"); This is written in webpack.config.js//Introduce plug-in classes with nodejs modular syntax
plugins: [
//html packaging plug-in. It will package the specified html and put the current configuration
//All packaged js or css inside is inserted into the html document
new HtmlWebpackPlugin({
template: './src/template/pp.html', //Process html template path
inject: "body", //The insertion position of the packaged js true false [do not insert] head body
minify: { //What content is compressed when packaging html
removeComments: true, //Remove comments
removeAttributeQuotes: true, //Whether to remove the double quotes of the attribute
collapseWhitespace: true //Whether to move out of the blank space
},
chunks: ["hh", "pp"], //package specific js files
filename: "pro.html" //output html file name
}),
],