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"
  ]