src内容与1一致

    1. const { resolve } = require('path');
    2. const HtmlWebpackPlugin = require('html-webpack-plugin');
    3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    4. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
    5. // 设置nodejs环境变量
    6. process.env.NODE_ENV = 'development';
    8. module.exports = {
    9.   entry: './src/js/index.js',
    10.   output: {
    11.     filename: 'js/built.js',
    12.     path: resolve(__dirname, 'build')
    13.   },
    14.   module: {
    15.     rules: [
    16.       {
    17.         test: /\.css$/,
    18.         use: [
    19.           MiniCssExtractPlugin.loader,
    20.           'css-loader',
    21.           /*
    22.             css兼容性处理：postcss --> postcss-loader postcss-preset-env
    24.             帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
    26.             "browserslist": {
    27.               // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
    28.               "development": [
    29.                 "last 1 chrome version",
    30.                 "last 1 firefox version",
    31.                 "last 1 safari version"
    32.               ],
    33.               // 生产环境：默认是看生产环境
    34.               "production": [
    35.                 ">0.2%",
    36.                 "not dead",
    37.                 "not op_mini all"
    38.               ]
    39.             }
    40.           */
    41.           // 使用loader的默认配置
    42.           // 'postcss-loader',
    43.           // 修改loader的配置
    44.           {
    45.             loader: 'postcss-loader',
    46.             options: {
    47.               ident: 'postcss',
    48.               plugins: () => [
    49.                 // postcss的插件
    50.                 require('postcss-preset-env')()
    51.               ]
    52.             }
    53.           }
    54.         ]
    55.       }
    56.     ]
    57.   },
    58.   plugins: [
    59.     new HtmlWebpackPlugin({
    60.       template: './src/index.html'
    61.     }),
    62.     new MiniCssExtractPlugin({
    63.       filename: 'css/built.css'
    64.     }),
    65.     // 压缩css
    66.     new OptimizeCssAssetsWebpackPlugin()
    67.   ],
    68.   mode: process.env.NODE_ENV
    69. };