webpack.common.js中区分环境

需求分析：项目中需要使用webpack打包抽离css代码，css相关的loader的配置都写在webpack.common.js文件中。于是想再webpack.common.js文件中区分是打包还是启动服务操作，从而实现区分并在打包操作中抽离css代码；

（项目webpack结构，css处理相关loader都写在webpack.commom.js文件中）

1. 安装cross-env npm install --save-dev cross-env

2. package.json文件中设置scripts，分别给启动和打包命令设置NODE_NEV

"scripts": {
    "start": "cross-env NODE_ENV=development webpack serve --config scripts/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config scripts/webpack.prod.js",
  },

3.分别运行代码yarn start， yarn build，在webpack.common.js文件中打印； console.log("process.env.NODE_ENV:",process.env.NODE_ENV)

通过以上步骤就可以在webpack.common.js文件中区分打包和启动服务操作，从而做业务逻辑了；

{
        test: /\.css$/,
        use: [
          // 执行打包命令时，使用css代码抽离loader；启动服务时，使用style-loader
          process.env.NODE_ENV !== "development" ? MiniCssExtractPlugin.loader : 'style-loader',
          'style-loader', 
          'css-loader'
        ],
        exclude: /\.module\.css$/,
  },