生产环境 webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin');
// 设置nodejs环境变量 设置开发环境的配置，默认看生产环境
// process.env.NODE_ENV = 'development'

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader, 'css-loader', {
    // css兼容性处理
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          ['postcss-preset-env'],
        ],
      },
    },
  }
]

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/main[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    // 将某些资源发送到指定目录，
    assetModuleFilename: 'images/[hash:10][ext][query]',
    clean: true //每次构建前清理 /build 文件夹
  },
  module: {
    rules: [{
      oneOf: [
        // 加载css
        {
          test: /\.css$/,
          // MiniCssExtractPlugin.loader取代style-loader 作用：提取js中css成单独文件
          use: [...commonCssLoader],
        },
        // 加载less
        {
          test: /\.less$/,
          use: [...commonCssLoader, 'less-loader']
        },
        // 加载images url中的图片资源
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/,
          type: 'asset/resource'
        },
        // 将 HTML 导出为字符串，需要传入静态资源的引用路径
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        /* js兼容性处理：babel-loader @babel/core @babel/preset-env
         1、基本js兼容性处理 --> @babel/preset-env
           只能转换基本语法，promise不能转换
         2、全部js兼容性处理 --> @babel/polyfill
           问题：只要解决部分兼容性问题，但将所有兼容性代码全部引入，体积太大
         3、按需加载 --> core-js JavaScript的模块化标准库，可以只加载所需的特性，或者在没有全局名称空间污染的情况下使用它
        */
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              // 预设：知识babel做怎样的兼容性处理
              "presets": [
                ["@babel/preset-env", {
                  // 按需加载
                  "useBuiltIns": "usage",
                  // 指定core-js版本
                  "corejs": 3,
                  // 指定浏览兼容性版本
                  "targets": {
                    "chrome": "60",
                    "firefox": "60",
                    "ie": "9",
                    "safari": "10",
                    "edge": "17"
                  }
                }]
              ],
              cacheDirectory: true
            }
          }
        },
        // 加载其他文件
        {
          exclude: /\.(js|css|less|html|jpg|png|gif)$/,
          loader: 'file-loader',
          options: {
            outputPath: 'static',
            name: '[hash:10].[ext]'
          }
        }
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    }),
    new MiniCssExtractPlugin({
      // 重命名输出css文件
      filename: 'css/built[contenthash:10].css'
    }),
    new ESLintPlugin({
      exclude: 'node_modules',
      fix: true
    })
  ],
  // 就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。
  optimization: {
    minimizer: [
      // 压缩css
      new CssMinimizerPlugin(),
    ],
    // 开发环境下启用 CSS 优化
    minimize: true,
  },
  mode: 'development',
  devServer: {
    // 未配置端口，默认localhost:8080
    static: './build',
    open: true
  }
}

package.json 添加以下配置：

  //浏览器版本配置
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
//配置js兼容性
  "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },
 //不进行tree shaking的文件
  "slideEffects": [
    "*.css"
  ]