webpack学习5：提取css成单独文件、添加css兼容、压缩css、压缩html

提取css成单独文件

• 安装插件
  • npm install mini-css-extract-plugin --save-dev
• 引入插件
  • const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
• 配置loader

  {
    test: /\.less$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'less-loader',
    ]
  }
  

• 配置插件

  new MiniCssExtractPlugin({
    filename: "css/[name].css",
  })
  

• 运行指令
  • npm run build
  • serve -s build

添加css兼容

• 安装loader
  • npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env postcss-normalize autoprefixer --save-dev
• 配置loader

  {
    test: /\.less$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            require('postcss-normalize')(),
          ],
          sourceMap: true,
        },
      },
      'less-loader',
    ]
  }
  

• 添加配置文件: .browserslistrc

    last 1 version
    > 1%
    IE 10 # sorry
  

• 运行指令：
  • npm run build
  • serve -s build

压缩css

• 安装插件
  • npm install optimize-css-assets-webpack-plugin --save-dev
• 引入插件
  • const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);
• 配置插件

  new OptimizeCssAssetsPlugin({
    cssProcessorPluginOptions: {
      preset: ['default', { discardComments: { removeAll: true } }],
    },
    cssProcessorOptions: { // 解决没有source map问题
      map: {
        inline: false,
        annotation: true,
      }
    }
  })
  

• 运行指令：
  • npm run build
  • serve -s build

压缩html

• 修改插件配置

  new HtmlWebpackPlugin({
    template: './src/index.html',
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: true,
      keepClosingSlash: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    }
  })
  

• 运行指令：
  • npm run build
  • serve -s dist

以上就是webpack生产环境的配置，可以生成打包后的文件。