webpack配置详解

迈不过友情╰ 2022-12-29 02:28 204阅读 0赞

### 文章目录 ###

*   *  一、entry
     *   *   *  1、string：'./src/index.js'
             *  2、array：\['./src/index.js', './src/add.js'\]
             *  3、object：\{index: \['./src/index.js'\], add: './src/add.js'\}
             *  4、特殊用法
     *  二、output
     *  三、module
     *  四、resolve：解析模块的规则
     *  五、devServer
     *  六、optimization

## 一、entry ##

#### 1、string：’./src/index.js’ ####

*  单入口
 *  打包形成一个chunk，输出一个bundle文件。
 *  此时chunk的名称默认是 main

#### 2、array：\[’./src/index.js’, ‘./src/add.js’\] ####

*  多入口
 *  所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
 *  只有在HMR功能中让html热更新生效
 *  不常用

#### 3、object：\{index: \[’./src/index.js’\], add: ‘./src/add.js’\} ####

*  多入口
 *  有几个入口文件就形成几个chunk，输出几个bundle文件
 *  此时chunk的名称是 key

#### 4、特殊用法 ####

{ 
      // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
      index: ['./src/index.js', './src/count.js'], 
      // 形成一个chunk，输出一个bundle文件。
      add: './src/add.js'
    }

## 二、output ##

output: { 
      // 文件名称（指定名称+目录）
      filename: 'js/[name].js',
      // 输出文件目录（将来所有资源输出的公共目录）
      path: resolve(__dirname, 'build'),
      // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
      publicPath: './',
      chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
      //library一般在用dll时使用
      // library: '[name]', // 整个库向外暴露的变量名
      // libraryTarget: 'window' // 变量名添加到哪个上 browser
      // libraryTarget: 'global' // 变量名添加到哪个上 node
      // libraryTarget: 'commonjs'
    },

## 三、module ##

module: { 
      rules: [
        // loader的配置
        { 
          test: /\.css$/,
          // 多个loader用use
          use: ['style-loader', 'css-loader']
        },
        { 
          test: /\.js$/,
          // 排除node_modules下的js文件
          exclude: /node_modules/,
          // 只检查 src 下的js文件
          include: resolve(__dirname, 'src'),
          // 优先执行
          enforce: 'pre',
          // 延后执行
          // enforce: 'post',
          // 单个loader用loader
          loader: 'eslint-loader',
          options: { }
        },
        { 
          // 以下配置只会生效一个
          oneOf: []
        }
      ]
    },

## 四、resolve：解析模块的规则 ##

resolve: { 
      // 配置解析模块路径别名
      //优点简写路径 缺点路径没有提示
      alias: { 
        $css: resolve(__dirname, 'src/css')
      },
      // 配置省略文件路径的后缀名
      extensions: ['.js', '.json', '.jsx', '.css'],
      // 告诉 webpack 解析模块是去找哪个目录
      modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
    }

例：

import '$css/index';

## 五、devServer ##

devServer: { 
      // 运行代码的目录
      contentBase: resolve(__dirname, 'build'),
      // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
      watchContentBase: true,
      watchOptions: { 
        // 忽略文件
        ignored: /node_modules/
      },
      // 启动gzip压缩
      compress: true,
      // 端口号
      port: 5000,
      // 域名
      host: 'localhost',
      // 自动打开浏览器
      open: true,
      // 开启HMR功能
      hot: true,
      // 不要显示启动服务器日志信息
      clientLogLevel: 'none',
      // 除了一些基本启动信息以外，其他内容都不要显示
      quiet: true,
      // 如果出错了，不要全屏提示~
      overlay: false,
      // 服务器代理 --> 解决开发环境跨域问题
      proxy: { 
        // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
        '/api': { 
          target: 'http://localhost:3000',
          // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
          pathRewrite: { 
            '^/api': ''
          }
        }
      }
    }

## 六、optimization ##

optimization: { 
      splitChunks: { 
        chunks: 'all'
        // 默认值，可以不写~
        /* minSize: 30 * 1024, // 分割的chunk最小为30kb maxSiza: 0, // 最大没有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量 maxInitialRequests: 3, // 入口js文件最大并行请求数量 automaticNameDelimiter: '~', // 名称连接符 name: true, // 可以使用命名规则 cacheGroups: { // 分割chunk的组 // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。 vendors: { test: /[\\/]node_modules[\\/]/, // 优先级 priority: -10 }, default: { // 要提取的chunk最少被引用2次 minChunks: 2, // 优先级 priority: -20, // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块 reuseExistingChunk: true } }*/
      },
      // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
      // 解决：修改a文件导致b文件的contenthash变化
      runtimeChunk: { 
        name: entrypoint => `runtime-${ entrypoint.name}`
      },
      minimizer: [
        // 配置生产环境的压缩方案：js和css
        new TerserWebpackPlugin({ 
          // 开启缓存
          cache: true,
          // 开启多进程打包
          parallel: true,
          // 启动source-map
          sourceMap: true
        })
      ]
    }