shanlu0000

npm install --save-dev optimize-css-assets-webpack-plugin

webpack配置:

const { resolve } = require(\'path\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
const MiniCssExtractPlugin = require(\'mini-css-extract-plugin\');
const OptimizeCssAssetsWebpackPlugin = require(\'optimize-css-assets-webpack-plugin\')

// 设置nodejs环境变量
// process.env.NODE_ENV = \'development\';

module.exports = {
  entry: \'./src/js/index.js\',
  output: {
    filename: \'js/built.js\',
    path: resolve(__dirname, \'build\')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          \'css-loader\',
          {
            loader: \'postcss-loader\',
            options: {
              ident: \'postcss\',
              plugins: () => [
                // postcss的插件
                require(\'postcss-preset-env\')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: \'./src/index.html\'
    }),
    new MiniCssExtractPlugin({
      filename: \'css/built.css\'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode: \'development\'
};

压缩后的 bundle.css

 

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-12-02
  • 2021-08-17
  • 2021-10-16
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-09
猜你喜欢
  • 2022-12-23
  • 2022-02-08
  • 2021-12-06
  • 2022-12-23
  • 2022-12-23
  • 2021-09-02
  • 2021-12-04
相关资源
相似解决方案