【面試準備·2】webpack

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  // mode: 'production'
  /**
   * 配置入口檔案
   * 相當於
   * entry { main: './src/index.js' }
   * 可以配置多個入口
   */
  entry: './src/index.js',

  /**
   * 配置輸出路徑和檔名
   */
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },

  module: {
    rules: [
      /**
       * 配置 babel-loader 來使用 ES6 和 react 語法
       * test 和 include/exclude 指定作用的檔案
       * use 指定 loader 和相關配置
       */
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src') // 指定哪些路徑下的檔案需要經過 babel-loader 處理
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      /**
       * 將 eslint-loader 設定為前置 loader
       * 因為 eslint 檢查的是未經處理的原始碼
       * 要保證最先進行處理
       * 通過 npx eslint --init 命令初始化一個 eslint 配置檔案
       */
      {
        enforce: "pre",
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        loader: "eslint-loader"
      },
      /**
       * v4 以後使用 mini-css-extract-plugin 代替 extract-text-webpack-plugin
       * style-loader 是把樣式通過 js 生成樣式插入到 html 
       * MiniCssExtractPlugin 是提取樣式到檔案
       * 所以使用 MiniCssExtractPlugin 就不需要 style-loader 了
       * css-loader 處理 css 檔案的引用 @import and url() like import/require()
       * postcss-loader 配置見檔案 postcss.config.js 自動新增瀏覽器字首
       */
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader"
        ]
      },
      /**
       * 處理圖片
       */
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
        ],
      }
    ]
  },

  plugins: [
    /**
     * 將打包好的js和css檔案在指定html檔案中自動引入
     */
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'public/index.html'
    }),
    /**
     * 提取css到指定檔案
     */
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      // chunkFilename: "[id].css"
    }),
    /**
     * 打包前刪除之前的生成檔案
     * 預設刪除 <PROJECT_DIR>/dist/ 下的所有檔案
     */
    new CleanWebpackPlugin(),
    /**
     * 用於建立一些在編譯時可以配置的全域性常量
     */
    new webpack.DefinePlugin({
      VERSION: JSON.stringify('5fa3b9')
      // 如果指定了 mode 會自動新增變數 process.env.NODE_ENV = mode
      // "process.env.NODE_ENV": JSON.stringify("production")
    }),
    /**
     * 複製檔案 不經過webpack處理 直接複製到指定目錄
     * from 配置來源，to 配置目標路徑
     */
    new CopyWebpackPlugin([
      { from: 'src/assets/favicon.ico', to: 'favicon.ico' }
    ])
  ],

  /**
   * 配置程式碼的解析路徑
   */
  resolve: {
    /**
     * 配置路徑別名
     */
    alias: {
      '@src': path.resolve(__dirname, 'src')
    },
    /**
     * 搜尋模組路徑的目錄
     */
    modules: [
      "node_modules"
    ],
    // 查詢路徑是自動新增的檔案字尾
    // 減少配置以防降低查詢效率
    extensions: [".js", ".jsx"]
  },

  optimization: {
    // mode 為 production 時
    // 預設開啟壓縮
    // minimize: true
    // 可以通過提供一個或多個定製過的 TerserPlugin 例項，覆蓋預設壓縮工具(minimizer)。
    minimizer: [new UglifyJsPlugin()],
  },

}
複製程式碼