webpack.config.js(webpack相关配置介绍)

const path = require('path');
//引入webpack
const webpack = require('webpack');
//清除build/dist文件夹文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//生成创建Html入口文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//将css提取到单独的文件中
const MiniCssExtract = require('mini-css-extract-plugin');
//区分大小写的路径
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
//在webpack中拷贝文件和文件夹（在离线应用中，前端所有文件都需在在本地，有些文件（比如iconFont)需要转为离线文件，
//这些文件可以直接引用更方便些，这就需要在打包时直接复制到打包文件下，可以在打包时调用文件复制方法）
const CopyPlugin = require('copy-webpack-plugin');
//将选择的chunk插入到html中(要与html-webpack-plugin配合使用)
const InlineChunkHtmlPlugin = require('./plugins/InlineChunkHtmlPlugin');
module.exports = function exports(webpackEnv) {
// 定义生产环境or开发环境
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';
  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',   //开发模式
    bail: isEnvProduction,    // 生产环境时，如果编译过程一有error，立马停止编译
    devtool: isEnvProduction
      ? false
      : isEnvDevelopment && 'cheap-module-source-map',
    // 入口文件
    entry: { main: './src/main.js' },
    output: {
      //输出文件路径
      path: path.resolve(__dirname, '../dist'),
      pathinfo: isEnvDevelopment,
      //输出文件名
      filename: isEnvProduction
        ? 'assets/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'assets/js/bundle.js',
      futureEmitAssets: true,
      chunkFilename: isEnvProduction
        ? 'assets/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'assets/js/[name].chunk.js',
      publicPath: '/',
      globalObject: 'this',
    },
//  生产环境中压缩文件的一些配置
optimization: {
      minimize: isEnvProduction,
      splitChunks: {
        chunks: 'all',
        name: false,
       // 缓存
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial', // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: path.join(__dirname, 'src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      },
      runtimeChunk: {
        name: (entrypoint) => `runtime-${entrypoint.name}`,
      },
    },
resolve: {
      // 只在当前目录下查找
      modules: ['node_modules'],
     //扩展名顺序
      extensions: [
        '.js',
        '.jsx',
        '.tsx',
        '.ts',
        '.css',
        '.scss',
        '.less',
        '.vue',
        ...
      ],
      //别名
      alias: {
        '@': path.resolve(__dirname, '../src'),
        '@api': path.resolve(__dirname, '../src/api'),
        '@assets': path.resolve(__dirname, '../src/assets'),
        '@utils': path.resolve(__dirname, '../src/utils'),
       ...
      },
    },
// loader加载器模块配置
module: {
      strictExportPresence: true,
      rules: [
        { parser: { requireEnsure: false } },
        { 
          test: /\.(js|mjs|jsx|ts|tsx)$/,   //正则表达式匹配.js巴拉巴拉为后缀的文件
          enforce: 'pre',   //强制更改顺序，pre 前  post 后
         // 使用loader
          use: [
            {
              options: {
                cache: true,
                eslintPath: require.resolve('eslint'),
                resolvePluginsRelativeTo: __dirname,
              },
              loader: require.resolve('eslint-loader'),
            },
          ],
          include: path.resolve(__dirname, '../src'),
        },
     ],
},
//  配置插件
plugins: [
      isEnvProduction && new CleanWebpackPlugin(),
      new CopyPlugin({
        patterns: [
          { from: 'static', to: path.resolve(__dirname, '../dist/static') },
        ],
      }),
      report ? new BundleAnalyzerPlugin({}) : undefined,
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        inject: true,
        template: './src/index.html',    //模板路径，指定生成的文件所依赖哪一个html文件模板（需安装对应的loader）
        ...(isEnvProduction
          ? {
            minify: {    //传递 html-minifier 选项给 minify 输出
              removeComments: true,    //清理html中的注释
              collapseWhitespace: true,  //清理html中的空格、换行符
              removeRedundantAttributes: true,  //清理属性上的引号
              useShortDoctype: true,  //用short (HTML5) doctype替换doctype
              removeEmptyAttributes: true,  //清理内容为空的元素
              removeStyleLinkTypeAttributes: true,  //从style和link标签中删除type="text/css"
              keepClosingSlash: true,  //保留单例元素的末尾斜杠
              minifyJS: true,  //压缩html内的js
              minifyCSS: true,  //压缩html内的样式
              minifyURLs: true,  //在各种属性中缩小url(使用relateurl)
            },
          }
          : undefined),
      }),
...
    ].filter(Boolean),
  };
};