Question：

webpack5打包不能提取css为单独的文件（mini-css-extract-plugin）

Desc

webpack中配置了mini-css-extract-plugin用来提取样式到独立文件，可运行启动时，却没有生成css文件,页面没有样式。
技术栈：react+webpack5
配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//提取css文件
const ESLintPlugin = require('eslint-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports= {
  module:{
    rules:[
      {
        test:/\.less$/,
        use:[
          MiniCssExtractPlugin.loader,//提取css成单独文件
           {
            loader: 'css-loader',
            options: {
              modules: {
                getLocalIdent: (context, localIdentName, localName) => {
                  return localIdentName;
                },
              }
            },
          },
          'postcss-loader',//css兼容
          'less-loader'
        ],
      }
    ]
  },
  plugins:[
    new ESLintPlugin({
      context:path.resolve(__dirname,'../src'),//绝对路径，配置需要检查的文件
      exclude:"node_modules",//排除node_modules下的文件，
      cache:true,//开启缓存
      cacheLocation:path.resolve(__dirname,'../node_modules/eslintcache')//配置缓存文件地址，同样配到node_modules下面
    }),
    new HtmlWebpackPlugin({
      template:path.resolve(__dirname,'../src/index.html'),//绝对路径
      title:'纯手工打造一款react应用'
    }),
    new MiniCssExtractPlugin({filename:'[name].[contenthash:8].css'}),
    new ReactRefreshWebpackPlugin()//js热更新
  ],
  devServer:{
    compress: true,
    port: 8081,
    hot:true,
    historyApiFallback: true,
    proxy: {
      '/api': 'http://192.168.1.2:8000/api/drf_stock/',
    },
  }
}

Answer:

排查后发现是package.json中配置了sideEffects:false导致css被当作无副作用的静态资源，被删除掉了。
sideEffects副作用：webpack4的一个新功能，允许通过配置的方式去标识代码是否有副作用，从而为 Tree Shaking 提供更多的压缩空间，sideEffects 一般用于开发npm模块时，标记是否有副作用。官方文档中将它和 Tree Shaking 放在一起讲，所以容易误解为它们是因果关系，实际上二者没什么关系。

image.png

方案一：直接删掉package.json中的sideEffects属性配置
方案二：将css文件添加到 sideEffect 列表中，以免在生产模式中无意中将它删除

sideEffects:["**/*.css"]

拓展

Tree Sharking & sideEffects 副作用

sideEffects 副作用（副作用：模块执行时除了导出成员之外所作的事情），一般用于开发npm模块（import，export）时，标记是否有副作用
Tree Sharking树摇，二者不是因果关系
sideEffects 允许通过在配置的方式去标识代码是否有副作用，从而为 Tree Shaking 提供更多的压缩空间。

package.json和webpack配置文件中的sideEffects的区别

package.json的sideEffects：标识当前package.json所影响的项目，当中所有的代码是否有副作用，默认true，表示当前项目中的代码有副作用
webpack配置文件中的sideEffects：开启功能，是否移除无副作用的代码
默认false，表示不移除无副作用的模块。在production模式下自动开启。
webpack只能通过读取package.json的sideEffects字段来识别代码是否有副作用
二者需要配合使用，才能处理无副作用的模块。

sideEffects 使用注意

使用webpack sideEffects功能的前提是，确保代码没有副作用。
否则webpack打包时就会误删那些有副作用的代码。
例如导入一个模块，它的内容是立即执行的，而不是通过导出成员等待被调用。

//onload.js绑定初始事件
window.onload=()=>{
//do something
}
//index.js
import './onload.js'

解决办法 & 常用方案：

在package.json中关闭标识无副作用
或者具体标识项目中哪些文件有副作用，webpack就不会忽略这些有副作用的模块,这种方式，未被标识的模块，就会被当作无副作用处理

//package.json
// ...
"sideEffects": [
  "**/*.css",
  "**/*.scss",
  "./esnext/index.js",
  "./esnext/configure.js"
],
// ...

webpack5+mini-css-extract-plugin排坑&sideEffect