webpack——css文件的代码分割(十五)

为页面添加样式:
在src目录下新建style.css
src/style.css

body {
    background: purple;
}

src/index.js

import './style.css'

运行npx run dev-build,页面可以看到样式,webpack在做打包的时候会把css文件打包在js里

需求: 想要把引入的 css 打包成单独的一个文件,需要使用MiniCssExtractPlugin
MiniCssExtractPlugin使用的参考链接: https://webpack.js.org/plugins/mini-css-extract-plugin/
安装:

npm install --save-dev mini-css-extract-plugin

MiniCssExtractPlugin:
-可对css的引入文件进行代码分割
-会把 css 打包成单独的一个文件
-这个插件适合在production模式下做打包

调整一下webpack.common.js中module部分的内容,将module部分从公共代码移到webpack.dev.js 和 webpack.prod.js:
webpack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    entry: {
        app: './src/index.js',
        // lodash: './src/lodash.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist'),
        //publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
        // publicPath: '/'  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    //代码分割
    optimization: {
    	usedExports: true, 
        splitChunks: {
            //对异步代码实现代码分割  //initial: 同步代码 //all: 对同步异步代码都进行代码分割
            //使用all对同步代码实现代码分割时,还会走cacheGroups这里,需要在这里做一些配置
            chunks: "all", 
            minSize: 30000,  //大于该值做代码分割
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {  //同步代码走这里
                    //引入的库文件是否在node_modules中,是就放在vendor组中
                    test: /[\\/]node_modules[\\/]/,  
                    priority: -10,
                    // filename: 'vendors.js'
                },
                default: {     
                    priority: -20,
                    reuseExistingChunk: true,
                }
            }
        }
    }
}

webpack.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')  
const devConfig = {
    //默认没有Tree Shaking功能, devtool: cheap-module-eval-source-map
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            "corejs": "2",  //declaring corejs
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件
    ],
    //Tree Shaking配置项
    //optimization: {
    //    usedExports: true
    //}
}

module.exports = merge(commonConfig, devConfig)

webpack.prod.js
添加主要语句:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
use: [MiniCssExtractPlugin.loader, 'css-loader'],

const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const prodConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            "corejs": "2",  //declaring corejs
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 
                }
            },
            {
                test:/\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
        ]
    },
}


module.exports = merge(commonConfig, prodConfig)

注意tree shaking的代码分割:
package.json:

{
	"sideEffects": [
	    "*.css"
	  ],
}

运行npm run build,这时候就可以成功打包出单独的css文件了

如果现在有多个css文件,会把css文件都打包在一个css文件当中

optimize-css-assets-webpack-plugin对css进行代码压缩

参考链接：https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production