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_ENVWill be set todevelopment
// webpack.development.config.js

module.exports = {
	mode: 'development'
}
Copy the code
  • In production mode,process.env.NODE_ENVWill 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