webpack不同环境下使用CSS分离插件mini-css-extract-plugin

1.背景描述

使用mini-css-extract-plugin插件来打包css文件(从css文件中提取css代码到单独的文件中,对css代码进行代码压缩等)。

本次采用三个配置文件:

  • 公共配置文件:webpack.common.js
  • dev开发环境配置文件:webpack.dev.js
  • prod生产环境配置文件:webpack.prod.js

2.webpack.common.js (公共配置文件)

  • 开发环境和生产环境共用的配置,借助webpack-merge插件,可以merge到开发或生产环境,从而减少重复配置。
  • 引入了Node环境变量process.env.NODE_ENV,可以根据传入的环境参数,动态更改配置,具体请看代码。
npm i -D mini-css-extract-plugin webpack-merge html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV != "production"
const path = require('path');

module.exports = {
    entry: './src/index.js',
    devServer: {
        static: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 指定一个 publicPath,默认使用 webpackOptions.output中的publicPath
                            // publicPath的配置,和plugins中设置的filename和chunkFilename的名字有关
                            // 如果打包后,background属性中的图片显示不出来,请检查publicPath的配置是否有误
                            // publicPath: './src',
                            publicPath: devMode ? './src' : './src',   // 根据不同环境指定不同的publicPath
                        },
                    },
                    'css-loader',
                    // 'sass-loader'
                ],
            },
        ]
    },
    plugins: [
        // 创建了一个全新的html文件,所有的 bundle 都自动添加到其中。
        new HtmlWebpackPlugin({
            title: 'development'
        }),
        // css代码分离
        new MiniCssExtractPlugin({
            // 这里的配置和webpackOptions.output中的配置相似
            // 即可以通过在名字前加路径,来决定打包后的文件存在的路径
            filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
            chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        // 每次构建前清理 /dist 文件夹
        clean: true,
    },
    optimization: {
        // 进行代码分离
        splitChunks: {
            chunks: 'all',
        },
    }
}

3.webpack.dev.js(dev环境的配置文件)

  • dev环境的配置,记得把mode设置为development模式,否则webpack4以后会默认为production模式。
npm i -D webpack-merge

注意引入merge是使用 { merge } 形式:

const { merge } = require("webpack-merge");
const common = require("./webpack.common");

module.exports = merge(common, {
    // dev环境的配置,记得把mode设置为development模式,否则webpack会默认为production模式。
    mode: "development",
    // 可以将编译后的代码映射回原始源代码,便于追踪 error 和 warning(浏览器中打开生成的 index.html 文件,点击按钮后控制台将会报错)
    devtool: 'inline-source-map',
});

4.webpack.prod.js(生产环境的配置文件)

  • 生产环境的配置,默认开启tree-shaking和js代码压缩;
  • 通过optimize-css-assets-webpack-plugin插件可以对css进行压缩,与此同时,必须指定js压缩插件(例子中使用terser-webpack-plugin插件),否则webpack不再对js文件进行压缩;(webpack5中不再支持optimize-css-assets-webpack-plugin插件而是使用css-minimizer-webpack-plugin)
  • 设置optimization.splitChunks.cacheGroups,可以将css代码块提取到单独的文件中。
  • 注意生产环境必须使用devTool:'source-map',否则报警告页面渲染不出来
const { merge } = require("webpack-merge");
const common = require("./webpack.common");
// 生成环境下对JS进行压缩
const TerserJSPlugin = require('terser-webpack-plugin');
// 生成环境下对CSS进行压缩
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");

module.exports = merge(common, {
    // dev环境的配置,记得把mode设置为development模式,否则webpack会默认为production模式。
    mode: "production",
    devtool: 'source-map',
    optimization: {
        minimizer: [new TerserJSPlugin({}), new CssMinimizerWebpackPlugin({})],
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                },
            }
        },
    }
});

和dev环境同样的配置会报以下警告,页面也渲染不出来:

webpack不同环境下使用CSS分离插件mini-css-extract-plugin_第1张图片

webpack不同环境下使用CSS分离插件mini-css-extract-plugin_第2张图片

使用css-minimizer-webpack-plugin和terser-webpack-plugin插件也无法正常启动

解决:

是因为使用了devtool:"inline-source-map"选项配置后报警告,改为devtool:"source-map"后启动正常

5.package.json配置文件

  • sideEffects: 生产环境打包的时候,会默认开启tree-shaking,如果不设置sideEffects,某些通过import方式引入的css文件可能不会被打包,因为tree-shaking会甩掉没有导出任何东西(即文件中没有export关键字)的文件。所以,不希望被tree-shaking的文件,请在sideEffects中配置与之匹配的正则表达式(如下,在package.json中添加)。
  • NODE_ENV: 由于项目中用到了Node的环境变量,所以打包时需通过NODE_ENV传入环境变量。例如:"script":{ "dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development"})。
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.sass"
  ],
  "scripts": {
     "dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development",
    "prod": "set NODE_ENV=production && webpack serve --open --config ./webpack.prod.js --mode=production"
  },
}

6.总结:

  • 不同环境下的打包,如果出现图片显示不了时(特别是css中的图片),请检查publicPath的配置。
  • mode: 'production'会开启tree-shaking和js代码压缩,但配置optimization. minimizer会使默认的压缩功能失效。所以,指定css压缩插件的同时,务必指定js的压缩插件。
  • mini-css-extract-plugin插件,结合optimization.splitChunks.cacheGroups配置,可以把css代码打包到单独的css文件,且可以设置存放路径(通过设置插件的filenamechunkFilename)。
  • 生产环境下不能使用devtool:"inline-source-map",而用devtool:"source-map"

参考:mini-css-extract-plugin插件快速入门_mn_front的博客-CSDN博客

你可能感兴趣的:(webpack,前端,webpack,前端)