处理CSS

加载css (npm install style-loader css-loader —save-dev)

module.exports = {
  ...,
  module: {
    rules: [
      {
        test:/\.css$/i,
        use:['style-loader','css-loader']
      },
    ]
  }
}

MiniCssExtractPlugin (npm install mini-css-extract-plugin —save-dev)

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css"
    })
  ]
  rules:[
    {
      test: /\.css$/i,
      use:[MiniCssExtractPlugin.loader, "css-loader"]
    }
  ]
}

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

压缩css

// 设置nodejs环境变量
process.env.NODE_ENV = "development"
module.exports = {
    entry: "./src/main.js",
    output:{//输出路径
        filename:'js/build.js',
        // __dirname nodejs的变量，代表当前文件的绝对路径
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules:[
            {
                test: /\.css/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            postcssOptions: {
                                ident: 'postcss',
                                plugins: [
                                    // postcss的插件
                                    require('postcss-preset-env')()
                                ]
                            }
                        }
                    }
                ]
                // css 兼容性处理 postcss
                // 下载 postcss-loader postcss-preset-env
                // "browserslist": {
                    // 开发环境 --> 设置node的环境变量
                //     "development":[
                //       "last 1 chrome version",
                //       "last 1 fiefox version",
                //       "last 1 safari version"
                //     ],
                //     "production":[
                //       ">0.2",
                //       "not dead",
                //       "not op_mini all"
                //     ]
                //   }
            }
        ]
    },
    // 压缩css
    optimization: {
        minimize: true,
        minimizer :[
          // 下载css-minimizer-webpack-plugin
            new CssMinimizerPlugin()
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        // 提取css为单独的文件 下载 mini-css-extract-plugin
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ],
    mode:'development'
}