webpack基础-01：webpack.common.js 一般配置

        webpack 学起来不知道大家感觉怎么样，反正我学的 md ,想咬人 

一方面文档有些说明不是很清楚，一方面配置太他么多了，记不住啊。记住有点不太实际，如果把平时整理好的配置记录下来，等到不满足需求了再去查文档

loader 及 插件的使用会在代码中注释

talk is cheap,show me the code

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { DefinePlugin } = require('webpack')
const isProduction = process.env.NODE_ENV;


module.exports = (env, argv) => {
  const isProduction = env === 'production' ? true : false
  console.log('isProduction',isProduction)
  return {
    entry: {
      index: "./src/index.js",
      print: "./src/print.js",
    },
    output: {
      filename: "js/[name].[contenthash:4].js",
      path: path.resolve(__dirname, "../dist"),
      clean: true, // 清理dist 文件夹
    },
    resolve: {
      extensions: [".js", ".json", ".ts", ".jsx", ".vue"],
      // alias: {
      //   '@': resolveApp('./src')
      // }
    },

    plugins: [
      new HtmlWebpackPlugin({
        title: "Development",
        template:'./public/index.html'         // 默认应该是webpack—01/
      }),
      new CopyWebpackPlugin({                 // 和上面的HtmlWebpackPlugin 重复了 会报错
        patterns:[
          {
            from:'./public',                   // 需要使用globOptions.ignore 排除                                     
                                               // index.html 文件
            globOptions:{
              ignore:['**/index.html']        // 注意加上 **/
            }
          }
        ]
        // to:''          默认打包到dist 文件下 to 可以省略
      }),
      new DefinePlugin({                    // 定义全局变量
        BASE_URL:'"./"'                     // 注意里面也有 ""
      })

    ],
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            "css-loader"],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: "asset/resource",
          parser: {
            // 转base 64 条件
            dataUrlCondition: {
              maxSize: 25 * 1024, // 25kb
            },
          },
          generator: {
            filename: "imgs/[contenthash:4][ext][query]", // 输出到dist/images
          },
        },
        {
          test: /\.js$/,
          //使用include来指定编译文件夹
          // cache-loader thread-loader 用来 提升打包性能
          include: path.resolve(__dirname, "../src"),
          exclude: /node_modules/,
          use: ["cache-loader", "thread-loader", "babel-loader"],
        },
      ],
    }
  };
};

还有一些常见的 loader 大家可以自行加上去 如 postcss-loader 、less-loader 等等以后会慢慢补全

下一篇：webpack 开发环境常用配置