The zero configuration WebPACK (based webpack 4 and version babel 7)

webpack core concepts:

• Entry: Entrance
• Module: module, webpack Everything is in module
• Chunk: code base, a combination of a chunk from a dozen modules, combined with the code for dividing
• Loader: converter module, the module for the new content into the original content on demand
• Plugin: extension, in particular the timing of the build process webpack injection expansion logic to change the results of the build or do what you want to do
• Output: output

webpack process:

Original link: point I

After webpack startup configuration from Entry Module start recursive resolution in all Entry Module dependent. Each found a Module, it will be based on the configuration of the Loader to find the corresponding conversion rules, the conversion of the Module, and then parse out the current Module module dependent. Entry these modules will be grouped as a unit, and all of a dependent Entry module is assigned to a group is a Chunk. Preferably all Webpack Chunk will be converted into an output file. Webpack performs logic Plugin defined in at the right time throughout the process.

Let's start from scratch configured to support a packed picture, CSS, LESS, SASS, support ES6 / ES7 compressed webpack JSX configuration and grammar, and code.

1. The simplest configuration webpack

First, initialize and install npm dependent webpack of:

npm init -y
npm install --save-dev webpack webpack-cli

Webpack.config.js configuration file as follows:

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    }
}

Description: publicPath the upper line is arranged cdn address.

Packaged using the command:

webpack --mode production

You may be configured to package.json field of scripts.

Inlet file src / index.js, the package outputting dist / bundle.js.

2. Use the template html

html-webpack-plugin can specify a template template file in the output directory will generate html file, and after the introduction of js package.

Installation depends:

npm install --save-dev html-webpack-plugin

In webpack.config.js increase plugins configuration:

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //...other code
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html')
        })
    ]
}

HtmlWebpackPlugin There are other parameters, such as title (html of the title), minify (whether you want to compress), filename (dist generated html file names), etc.

3. Configure webpack-dev-server

webpack-dev-server provides a simple Web server capabilities and real-time updates of heat

Installation depends:

npm install --save-dev webpack-dev-server
复制代码

In webpack.config.js increase devServer configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //...other code
    devServer: {
        contentBase: './dist',
        port: '8080',
        host: 'localhost'
    }
}

Increase in the scripts package.json field:

webpack-dev-server --mode development

After that, we can npm run dev, to start the service.

More knowledge webpack-dev-server, please visit: webpack.js.org/configurati...

4. Support for loading css file

By using different style-loader and css-loader, css file can be converted into the JS file type.

Installation depends:

npm install --save-dev style-loader css-loader

Increase loader configuration in webpack.config.js in.

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            }
        ]
    }
}

loader can configure the following parameters:

• test: the matching process the file extension of regular expressions
• use: loader Name
• include / exclude: File must be handled manually specify the folder or folders masking process need not
• query: provides additional setting options for the loader

If you need to pass parameters loader, you can use + loader ways, such as:

module.exports = {
    //other code
    module: {
        rules: [
            {
            use: [{
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader'
                ],
                //....
            }
        ]
    }
} 

5. Support Load picture

• file-loader: Picture path to solve the problem the introduction of CSS and other files
• url-loader: when the image is smaller than the time limit will Base64-encoded picture, or greater than the limit parameter used to copy file-loader

If you want images stored in a separate directory, you need to specify outputPath

Installation depends:

npm install --save-dev url-loader file-loader

Webpack.config.js increase in the loader configuration (increase of the array module.rules).

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images'
                        }
                    }
                ]
            }
        ]
    }
} 

6. Support to compile less and sass

Some co-workers may be accustomed to using a front-end or less sass write css, it also needs to be configured in webpack in.

Install the corresponding dependency:

npm install --save-dev less less-loader
npm install --save-dev node-sass sass-loader
复制代码

Increase the allocation (module.rules array) loader in the webpack.config.js.

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.less/,
                use: ['style-loader', 'css-loader', 'less-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.scss/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            }
        ]
    }
}   

7. Support escape ES6 / ES7 / JSX

ES6 / ES7 / JSX escape Babel need to rely on the support of the decorator.

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread
复制代码

Increase the allocation (module.rules array) loader in the webpack.config.js.

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env', '@babel/react'],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", { "legacy": true }]
                            ]
                        }
                    }
                ],
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            },
        ]
    }
}

　　

8. JS file compression

Installation depends:

npm install --save-dev uglifyjs-webpack-plugin
复制代码

Increased optimization of the configuration in webpack.config.js

const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    //other code
    optimization: {
        minimizer: [
            new UglifyWebpackPlugin({
                parallel: 4
            })
        ]
    }
}

9. The isolated CSS (CSS file if larger then)

Because the CSS and JS can be downloaded in parallel, when a lot of HTML files, they can be extracted to load the CSS alone

npm install --save-dev mini-css-extract-plugin
复制代码

Increase in webpack.config.js plugins configuration, and the 'style-loader' modified as {loader: MiniCssExtractPlugin.loader}.

CSS is packaged in a separate directory, then the configuration filename.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.css/,
                use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.less/,
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.scss/,
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]
}

10. CSS file compression

Installation depends:

npm install --save-dev optimize-css-assets-webpack-plugin
复制代码

Increase the allocation in the optimization of webpack.config.js

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    //other code
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    }
}

11. Before the package to empty the output directory

npm install --save-dev clean-webpack-plugin
复制代码

Increase in plugins configuration in webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    //other code plugins: [ new CleanWebpackPlugin() ] } 复制代码

So far, webpack configuration has been basically able to meet the demand.

Webpack.config.js complete and file package.json

webpack.config.js file:

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        contentBase: './dist',
        port: '8080',
        host: 'localhost'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env', '@babel/react'],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", { "legacy": true }]
                            ]
                        }
                    }
                ],
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.css/,
                use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.less/,
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.scss/,
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            outputPath: 'images'
                        }
                    }
                ]
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyWebpackPlugin({
                parallel: 4
            }),
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new CleanWebpackPlugin()
    ]
}

package.json file:

{
  "name": "webpk",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
    "@babel/preset-env": "^7.4.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1"
  }
}