The webpack build tool has been popular for several years and is also a very popular and convenient build tool at present. There is no reason not to learn it. Since you choose webpack, you must follow the times. We must follow the steps of the big bull, wait for me.
1. Webpack basics
- Use the npm init command to create it in the root directory, and press Enter all the way during the creation process.
- Local installation webpack command: npm install webpack webpack-cli --save-dev In devDependencies written after successful installation, you can view its version through the npm node_modules/.bin/webpack -v command.
- Global installation npm install -g webpack It is not recommended to install webpack globally. It will lock your project to the globally installed version and may also cause the build failure in different webpack versions.
Static resource file directory
- – src [Project source file directory]
- – dist [packaged file directory]
- – [webpack configuration file]
- – [NPM Package Management Configuration File]
- – node_modules [Dependency storage directory in the project]
two,
const webpack = require('webpack');
= {
mote:"development",//Refers to the current environment /*
development: development environment
production: Production environment
none: No processing is done
*/
//Entermination file, if you need multiple ports, you can change it to an object entry: './src/',
/*
Hot configures whether to enable the module's hot replacement function. The default behavior of devServer is to automatically refresh the entire page after discovering that the code is changed, and then sets hot.
The old module will be replaced with the new module without refreshing the entire page to achieve real-time updates.
If you choose hot:true to achieve the effect of hot update, you need to refer to the plug-in to achieve the effect you need. Another recommended
A simple way to set the scripts as follows
"scripts": {
"start": "webpack-dev-server --hot --inline",
},
*/
// Server environment devServer: {
hot: true, //It is recommended to use the second solution to start the service using command npm run start port:"8080",//The port default is 8080, can be set by yourself host:"192.",
/*
Host configures the address of the devServer service to listen, and can also be accessed using localhost. Browser input 192./
The simple method is set as follows
"scripts": {
"start": "webpack-dev-server --hot --inline",
},
*/
},
//Plugin plugins: [
//Hot loading plugin new (),
],
//Output output: {
//filename: The output file name, you can customize some rules filename: '[name].',
//path, configure the output file to be stored in the local directory path: (__dirname, 'dist')
}
};
3. Plug-in
1、HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({ // Package output HTML title: 'Hello World',//Title of the file minify: { //The function of minify is to compress html files removeComments: true, // Remove comments in HTML collapseWhitespace: true, // Remove whitespace and line breaks minifyCSS: true, // // Whether to compress the default value of css in html, false; caseSensitive: true, //Is it case sensitive, default false ollapseWhitespace: true, //Whether to remove spaces, default false minifyJS: true, //Whether to compress js in html removeAttributeQuotes: true, //Whether to remove the quotation marks of the attributes? Default false removeComments: true, //Whether to remove comments? Default false emoveCommentsFromCDATA: true, //Comments removed from scripts and styles Default false emoveEmptyAttributes: true, //Whether to delete empty attributes, default false removeRedundantAttributes: true, //Delete extra attributes removeScriptTypeAttributes: true, //Delete the type attribute of script, under h5, the default value of script type: text/javascript default value false },
filename: '', //The file name of the output html template: '', //The file path of the html template hash: true,//The function of hash is to give the generated js file a unique hash value. The default value is false. The html reference js effect after it is built is as follows. // <script type=text/javascript src=?22b9692e22e7be37b57e></script>
}),
]
2、CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
//This plug-in is mainly used to automatically delete unnecessary files in the dist directory in webpack new CleanWebpackPlugin()
]
Official introduction:
By default, this plugin will remove all files inside webpack's directory, as well as all unused webpack assets after every successful rebuild
3、ExtractTextWebpackPlugin
Download what we need first
npm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev
First configure webpack, and do not use plug-ins to complete it
= {
module : {
rules: [
{
test: /\.css$/,
use:[
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
After configuration, introduce the style file into the js entry file, and check the packaging results by packaging, you will find that CSS is packaged into JS and exists in the form of a string. If the package has been introduced, open the file using the browser and you will find that the css is inserted into the head in the form of style.
2. Use plug-ins
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
= {
module : {
rules: [
{
test: /\.css$/,
use : ({
fallback: "style-loader",
use: "css-loader"
})
}
/*
use: refers to what kind of loader is needed to compile the file
fallback: What loader to use to extract css file after compilation
*/
]
},
plugins: [
new ExtractTextPlugin(""),
new HtmlWebpackPlugin({ // About HtmlWebpackPlugin mentioned above title: 'extract-text-webpack-plugin',
filename: '',
template: (__dirname, ''),
inject : 'head'
})
]
}
After the above content is configured, package it and view it, you can find that the css file is cited in the head in the form of a link. During this period, it is automatically inserted with the HtmlWebpackPlugin plugin
This is the end of this article about briefly discussing the configuration of webpack build tool and common plug-ins. For more related webpack build tool configuration and common plug-ins, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!