• 项目目录

    image.png

    • 配置plugin（optimize-css-assets-webpack-plugin）

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

    • 配置文件 ```javascript 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文件变成commonjs模块加载js中，里面内容是样式字符串 ‘css-loader’, // css兼容性处理 { loader: ‘postcss-loader’, options: { ident: ‘postcss’, plugins: () => [ // postcss的插件 require(‘postcss-preset-env’)() ] } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: ‘./src/index.html’ }), // 提取css成单独文件 new MiniCssExtractPlugin({ filename: ‘css/built.css’ }), // 压缩css new OptimizeCssAssetsWebpackPlugin() ], mode: ‘development’ }; ```

    • 运行指令：webpack