In this article, we’ll take a quick look at some of the core concepts in WebPack and take a look at how configuration files are written
1, mode
Webpack has two common modes, one is development and the other is production.
There are corresponding built-in WebPack optimizations for both modes
- In the development mode,
process.env.NODE_ENV
Will be set todevelopment
// webpack.development.config.js
module.exports = {
mode: 'development'
}
Copy the code
- In production mode,
process.env.NODE_ENV
Will be set toproduction
// webpack.production.config.js
module.exports = {
mode: 'production'
}
Copy the code
2, entry
Entry is the starting point for webPack to build the module dependency diagram
Webpack recursively finds all the modules that the entry file depends on and builds a module dependency graph based on those dependencies
// webpack.config.js
// Abbreviate syntax for single entry files
module.exports = {
entry: './src/index.js' The entry attribute specifies the entry file path
};
Copy the code
We can also specify multiple entry files (this is an extensible approach)
For each entry file, WebPack builds a module dependency graph that is separate and independent of each other
// webpack.config.js
// Object syntax for multiple entry files
module.exports = {
entry: {
app: './src/app.js'.vendors: './src/vendors.js'}};Copy the code
3, the output
Output is the output file that webpack has packaged
After WebPack builds a module dependency diagram for an entry file, it packages all modules into one or more files for output
// webpack.config.js
module.exports = {
entry: './src/index.js'.output: { The output attribute specifies where to put the packaged file
// The filename attribute specifies the name of the output file
filename: 'bundle.js'.The path attribute specifies the absolute path to the output directory
path: '/dist'}};Copy the code
For multiple entry files, output can also specify only one output configuration
You should use placeholders to ensure that each file has a unique name
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js'.search: './src/vendors.js'
},
output: {
filename: '[name].js'.path: __dirname + '/dist'}}Copy the code
4, the loader
Loader is used to convert the module source code
Since WebPack only understands JavaScript, it is up to the Loader to convert other types of files into valid modules that WebPack can handle
Different loaders perform different tasks. The following example specifies the use of style-loader and CSS-loader to process CSS files
// webpack.config.js
module.exports = {
entry: './src/index.js'.output: {
filename: 'bundle.js'.path: '/dist'
},
module: {
The rules attribute is used to define processing rules
// It is an array in which each item is an object defining a processing rule
rules: [{// The test attribute identifies which files should be processed
// It can be a regular expression
test: /\.css$/.The use attribute specifies which loaders should be used
// It is an array in which each item is an object, specifying a loader
use: [
{
// Style-loader needs to be installed
// npm install --save-dev style-loader
loader: 'style-loader'
},
{
// CsS-Loader needs to be installed
// npm install --save-dev css-loader
loader: 'css-loader'.options: { The options property is used to pass in additional configuration
modules: true}}]}}Copy the code
5, the plugin
Plugin is used to handle extension tasks ranging from packaging optimization and compression to redefining variables in the environment
// webpack.config.js
// Built-in plugins
const webpack = require('webpack')
// External plugins need to be installed through NPM
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js'.output: {
filename: 'bundle.js'.path: '/dist'
},
module: {
rules: [{test: /\.(js|jsx)$/,
use: 'babel-loader'}},plugins: [
// Since plug-ins can carry parameters, we need to pass in a new instance
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'}})]Copy the code