2020-12-02 CSS 文件的代码分割（4.91）

//build目录下，webpack.common.js文件

const path = require('path')   
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin  = require('clean-webpack-plugin')

module.exports = {
    entry: {
        main: "./src/index.js"
    },  
    module: {
        rules: [
        {
            test: /\.js$/, 
            exclude: /node_modules/,  
            loader: 'babel-loader'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                }
            }
        },
        {
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
                loader: 'file-loader'
            }
        },
        {
            test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
        },{
            test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
   optimization: {
     splitChunks: {
       chunks: 'all',
     },
   },
    output: {
        filename: '[name].js' , //入口文件打包生成的文件名字
        chunkFilename:'[name].chunk.js',//间接引入的模块打包的时候，
                                       //生成的文件的名字就会走chunkFilename的配置内容
        path:path.resolve(__dirname,'dist'),   
    }
}

filename和chunkFilename有什么样的区别呢？
在src目录下index.js文件中，
异步的引入lodash这样的库，
创建一个DOM,挂载到页面上，
打包，
配置chunkFilename后，打包会是设么样子的？

2.png

3.png

1.png

entry: {
        main: "./src/index.js"
    }, 
index.js是入口文件在entry里面，
入口文件打包生成的这种js文件，都会走filename这个配置项，
所以index.js在做打包的时候，它前面的值是main:,
它打包生成的文件就是main.js

main.js里面会引入lodash,
lodash又被单独打包生成了一个文件vendors~lodash.chunk.js,

打包生成文件在整个代码运行的过程中，
main.js先执行，然后异步的去加载这个vendors~lodash.chunk.js,

这个vendors~lodash.chunk.js并不是一个入口的js问价，
它是一个被main.js异步加载的间接js文件，
如果你打包生成这样一个间接的js文件，
它就会走chunkFilename这个配置项，

4.png

或者查看dist目录下index.html文件

5.png

可以看到里面只引入了main.js，
所以main.js其实走的是入口文件，
所以走的就是filename这样一个配置参数

而vendors~lodash.chunk.js在index.html中找不到，
它是怎么载入的呢？
它是通过mian.js的代码里面再去引入lodash.js,
是间接引入的，
间接引入的模块打包的时候，
生成的文件的名字就会走chunkFilename的配置内容