In a practical application, instead of spa, you might need to generate multiple HTML; Too many CSS files are packed into JS, resulting in large JS. Need to introduce third-party plug-ins or self-written functions; When working with the React framework or VUE framework, you need to perform related configurations to solve the preceding problems

1. Multi-entry configuration

By default, only one HTML file is generated after packaging; In some cases, we need to generate multiple HTML files after packaging. Then we need to specify multiple entry files and modify the Filenme setting for output

1.1 First we need to specify multiple entries so that webPCK performs packaging parsing from several JS set by Entry

entry: {
    index: path.join(srcPath,'index.js'),
    other: path.join(srcPath,'other.js')
}
Copy the code

1.2 Modify the output file name Settings, because for the results of different JS packaging, in order to keep the output file name; We need to express filename as a variable

Output: {filename: '[name].[contentHash:8].js',// the value of name corresponds to the attribute name of the entry object path: disPath,}Copy the code

1.3 Store multiple HtmlWebpackPlugin instances in plugins array. The function of HtmlWebpackPlugin is to generate HTML files and introduce corresponding JS

plugins: [ new HtmlWebpckPlugin({ template: path.join(srcPth,'index.html'), filename: 'index.html', chunks: ['index']//chunks specifies what js names will be added to the generated HTML file. If chunks are not configured, all js names will be added. New HtmlWebpackPlgin({template: path.join(srcPth,'other.html'), filename: 'other.html', chuncks: ['other']// }) ]Copy the code

2. Remove the CSS file

In the case of unpacking the CSS file, the packaged CSS style will be in the packaged JS. In this case, the style will only work when the program runs the JS and the JS executes the style tag inserted into the body. And when CSS remains unchanged and JS is changed, CSS also needs to be packaged into JS, which costs performance. To make CSS execution independent of JS and improve packaging performance, it is better to extract CSS files. The extracted CSS files are imported as link tags in HTML

2.1 Configure MiniCssExtractPlugin in plugins

New MiniCssExtractPlugin({filename: 'CSS /main.[contentHash:8].css'})]Copy the code

2.2 Using loader to parse CSS /less Files. Instead of using style-loader to insert CSS content into style tags, use MiniCssExtractPlugin to extract files

Rules: [// remove CSS {test: /\.css$/, loader: [MiniCssExtractPlugin. Loader, 'CSS - loader', 'postcss - loader]}, / / pull away less transfer less CSS first {test: / \. Less $/, loader: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader' ] } ]Copy the code

2.3 Compress the removed CSS file

Minimizer: [new TerserJSPlugin({}), new OptimizeCssAssetsPlugin({})]} minimizer: [new TerserJSPlugin({}), new OptimizecassetSplugin ({})]}Copy the code

3. Remove common code

In real development, there will often be multiple modules that introduce the same common code, and when packaging, it will be a waste of space if each module contains the common code. We need to separate out the common parts and reference each other to reduce load and execution times. Moreover, if the public module is a module provided by a third party and its volume is relatively large, we need to package it separately. Otherwise, we just change the business code, and the third party module will also be re-packaged into JS, which will cost performance. The following deals with third-party modules and public modules respectively

3.1 Use splitChunks in Optimization

optimization: { splitChunks: { chunks: 'all', /** initial entry chunk, does not process asynchronously imported files. Async processes asynchronously imported files only. All All chunks */ // cacheGroups: {// Processes third-party module vendor: {name: 'vendor',//chunk name priority: 1, // priority test: /node_modules/, minSize: xx,// size limit, if smaller than the limit will not be removed minChunks: Priority: 0,// priority minSize: {name: 'common',//chunk name: 0,// priority minSize: Xx, size limits for common modules minChunks: 2// How many times a common module has to be reused at least}}}}Copy the code

4. Handle JSX

npm install --save-dev @babel/preset-react
Copy the code

After installation, set it in the. Babelrc file

{
    "presets": ["@babel/preset-react"]
}
Copy the code

V. Processing vUE files

Use vue-loader

rules: [
    {
        test: /\.vue$/,
        loader: ['vue-loader'],
        include: srcPath
    }
]
Copy the code