• 项目目录

    image.png

    • 配置loader（postcss-loader、postcss-preset-env）

      1. npm install --save-dev postcss-loader postcss-preset-env

    • 配置文件 ```javascript const { resolve } = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const MiniCssExtractPlugin = require(‘mini-css-extract-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’, // 修改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’ }) ], mode: ‘development’ };

    
- 修改package.json
```json
{
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}
    • 运行指令：webpack