Everyday speech

After constant tweaking and testing, the React WebPack configuration is finally out. The focus of this time is mainly on the development environment, while the production environment is the default mode of Production using WebPack.

The configuration includes:

  1. eslint+prettier;

  2. optimization.splitChunks;

  3. happypack;

  4. DllReferencePlugin & DllPlugin;

  5. .

Importance of Documentation

To be honest, for those of you who are new to Webpack, you may not be afraid of webpack configuration, but rather the long package.json. With so many dependencies, how do you know which ones you need? No kidding, I do know. Webpack relies on loaders and plugins. We know that when single-page references are packaged, the original structure is basically gone. And before the reference picture or font resources also according to the previous path search, is certainly not found. Then we will need to transform tool (resources), by the way – the url – loader | file – loader. Most people like to use CSS, less, and sass when writing styles. The corresponding tools are style-loader, CSS-loader, and less-loader. To use new JavaScript features or handle compatibility, use babel-loader. All of the above can basically handle some simple projects. But actually?

I don’t believe you, you old bastard!

Look at the documentation, look at the official description. This time also by looking at the Babel document, and some dependent documents to configure Webpack, the whole process is stress-free, and very authentic. So, documentation is important.

eslint+prettier

Code specifications are important when working as a team. The esLint + Prettier specification can be used. Both tools have their own focus, but the website also offers solutions that combine the two. See the official website for details. I personally am not used to creating too many configuration files, so I put them all in package.json.

// webpack.common.js
{
    enforce: "pre".test: /\.m? jsx? $/.exclude: /node_modules/.loader: "eslint-loader".options: {
        fix: true.cache: true.formatter: require("eslint-friendly-formatter"),}},Copy the code
"eslintConfig": {
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": [
        "plugin:prettier/recommended"
    ]
},
"prettier": {
    "singleQuote": true,
    "semi": true
},
Copy the code

The development environment

Development environment is nothing to say, simple and easy to configure, the official website is very detailed.

// webpack.dev.js

plugins: {
    / /...
    new webpack.HotModuleReplacementPlugin()
},
devtool: "eval-source-map".devServer: {
contentBase: path.resolve(__dirname, '.. '.'dist'),
port: APP_CONFIG.port,
hot: true.open: true
}

// index.js
// Don't forget these at the entrance.
// Because of the bubbling mechanism, just add one at the top.
if (module.hot) {
  module.hot.accept('./views/login/index.js', () => {
    render(App) // Render the application})}Copy the code

optimization.splitChunks

This configuration is used to split packets. In terms of performance optimization, the number of requests and the size of request packages are also important optimization points. The number of requests and the size of the requested data should be controlled within a reasonable range. Typically, though, we divide packages into parts that don’t change and parts that change. This is not only to split large packages into smaller packages, but also to take full advantage of the caching mechanism.

// webpack.common.js
runtimeChunk: 'single'.splitChunks: {
        cacheGroups: {
        verdor: {
            test: /[\\/]node_modules[\\/]/.name: 'verdors'.chunks: 'all'.priority: - 10,},common: {
            name: 'common'.chunks: 'all'.minChunks: 2.priority: - 20,}}}Copy the code

happypack

Converting files can be a time-consuming part of the packaging process, and happypack can spread this over multiple Node processes, which greatly reduces the packaging time (similarly, consider using thread-Loader). However, communication between processes is expensive, which is an optimization direction, whether to adopt, still need to consider.

// loader
{
    test: /\.m? jsx? $/.exclude: /node_modules/.use: 'happypack/loader? id=js',}// plugins
new HappyPack({
    id: 'js'.threadPool: happyThreadPool,
    loaders: [{
    loader: 'babel-loader'.options: {
        cacheDirectory: true.presets: [['@babel/preset-env', {
        "useBuiltIns": "usage"."corejs": 3}]."@babel/preset-react"].plugins: ['@babel/transform-runtime'."@babel/plugin-proposal-class-properties"["import",
            {
            "libraryName": "antd"."style": true}]]}}]})Copy the code

Don’t like separate Babel files, so Babel configuration is all here. In fact, there is quite a bit to configure for Babel. But fear not, Babel’s official documentation explains it all.

DllReferencePlugin & DllPlugin

As mentioned earlier, we usually use optimization.splitchunks to deal with third-party libraries and break them up into unchanging chunks. However, you need to repeat this step every time you pack. At this point, we thought, why don’t we just pack the parts that don’t change once, and then just pack the parts that change frequently, so that we can improve efficiency? Yes, that’s basically what the DllReferencePlugin & DllPlugin does. So, we do different configurations for these two parts.

// webpack.dll.js
new webpack.DllPlugin({
    context: process.cwd(),
    path: path.join(__dirname, '.. '.'dist'.'dll'.'[name]-manifest.json'),
    name: '[name]_[hash]'
})
// webpack.common.js
new webpack.DllReferencePlugin({
    context: process.cwd(), 
    manifest: require(path.resolve(__dirname, '.. '.'dist'.'dll'."vendor-manifest.json"))}),Copy the code

Multi-spa-webpack-cli Instructions

Multi-spa-webpack-cli has been released to NPM and can be installed in a Node environment. Press Enter all the way, all source code inside!!

npm install multi-spa-webpack-cli -g
Copy the code

The steps are as follows:

#1. Initialize the project
multi-spa-webpack-cli init spa-project

#2. Access the file directory
cd spa-project


#3. Pack the same parts
npm run build:dll

#4. Start the project (manually open browser: localhost:8090)
npm start
Copy the code

Webpack series:

  1. Tasted webpack | tasted webpack
  2. Handwritten webpack scaffolding command line tools | handwritten webpack scaffolding cli tool
  3. Webpack development environment configuration | webpack development environment configuration