webpack配置全解析

谭云挽星河
140 阅读3分钟

前言

在前端项目中大多数都是在使用各种脚手架来搭建项目，底层已经给我配置好了webpack，但是作为一个有追求的前端开发者，不仅要会开车，更要学会修车，正所谓家有余粮心里不慌，其实webpack就是各种配置，学习起来比不难，就是属性比较多，记起来比较麻烦，在这我给大家总结了一下webpack常见的各种配置，尽情食用。

只列举了常用部分的配置，更多配置

1.Entry

entry的三种设置方式

entry:'./src/index.js'//设置index.js为入口，单入口，生成一个chunk，输出一个bundle文件，文件名默认为main.js
entry:['./src/index.js','./app.js']//多入口，只会生成一个chunk包含了两个moulde，输出一个bundle文件，
entry:{
    index:'./src/index.js'，
    app:'./app.js'
}//生成index，app两个chunk，生成两个bundle文件

入口描述对象

image.png

  • dependOn：选项你可以与另一个入口chunk共享模块，避免重复加载相同的模块。
  • import：需要加载的入口文件。
  • filename：输出文件的路径和名称。
  • asyncChunks：创建按需加载的异步。
  • chunkLoading：加载chunk的方法， 'jsonp' (web)、'import' (ESM)、'importScripts' (WebWorker)、'require' (sync node.js)、'async-node' (async node.js)

2.Output

output: {
    path:resolve(__dirname, 'dist'),//文件输出路径，当前模块的目录下的dist，包含所有输出的资源
    filename: '[name].js',//输出文件名字，
    chunkFilename: '[name].js',//非入口chunk 文件的名称
    publicPath: '/',//指定在浏览器中所引用的地址。
    pathinfo: true,//webpack在bundle中引入所包含模块信息的相关注释。
    library: ‘[name]’，整个库向外暴露的属性名.
    libraryTarget:'commonjs'//通过commonjs的的方式暴露。
  },

3.Loader

配置模式（官方推荐）在 webpack.config.js文件中指定 loader。

//loader执行顺序从下往上
  module: {
    rules: [
      {
        test: /.css$/,//匹配所有以.css结尾的文件名
        //多个loader使用数组形式，如果不需额外配置可以写成字符串数组 use:['style-loader','css-loader','sass-loader']，需要配置可写成对象形式。
        use: [
          { loader: 'style-loader' },//以style标签的方式插入DOM树中

            //MiniCssExtractPlugin.loader，//会将 CSS 提取到单独的文件中，需要先使用mini-css-extract-plugin插件，可以替换掉style-loader
          {
            loader: 'css-loader',//解析css文件中的@import和url语句，处理css-modules，并将结果作为一个js模块返回
            options: {
              modules: true
            }
          },
          {
            loader: 'postcss-loader',//做兼容性处理
            options: {
              postcssOptions: { //设置PostCSS选项与插件
                plugins: [
                  [
                    'postcss-preset-env',//使会将最新的CSS 语法转换为目标环境的浏览器能够理解的CSS语法，做兼容性处理。在package.js中配置browserslist来配置需要处理的浏览器。
                  ],
                ],
              },
            },
          },
          { loader: 'sass-loader' }//把sass代码转变为css代码
        ]
      }，
      {
      test:/.(png|jpe?g|gif|webp|ico)$/,
      use: [
          {
            loader: 'url-loader',//将文件转换为 base64 URI,webpack5中已经废弃
            options: {
              limit: 10000,//指定文件的最大大小（以字节为单位）
              name: 'static/[name].[hash:8].[ext]',
              esModule: false,//启用CommonJS模块语法
              fallback: {      //指定当目标文件的大小超过选项中设置的限制时要使用的替代加载程序
                loader: 'file-loader',//将文件上的/`file-loader`解析为 url 并将文件发送到输出目录。
                options: {
                  name: 'static/[name].[hash:8].[ext]',
                  esModule: false
                }
              }
            }
          }
        ]

      },
      {
      test:/.(js|mjs|jsx|ts|tsx)$/,
      include:resolve(__dirname, 'src') ,//检测目标模块下的所有文件。
      exclude: ‘node_modules’,//不检测的模块。
      use: [
          {
            loader: 'babel-loader',//把es6及以上的语法转译为es5.
            options: {
              sourceType: 'unambiguous',//如果存在import/export语句则视为模块,否则视为脚本
              babelrc: false,
              cacheDirectory: 'babel-loader',
              presets: [
                ['babel-preset-env'，
                ]
              ],
              plugins: []
            }
          }
        ]
      }
    ]
  }

4.plugins

plugins:[
 MiniCssExtractPlugin { //本插件会将 CSS 提取到单独的文件中
      options: {
        filename: '[name].css',
        moduleFilename: [Function: moduleFilename],
        ignoreOrder: true, //移除 Order 警告
        chunkFilename: '[name].chunk.css'
      }
    },
  
]

5.resolve

resolve:{
    alias:{   //配置解析模块路径别名
    "@":resolve(__dirname, 'src')
    },
    extensions: [  //配置省略文件后缀别名
      '.web.js',  '.wasm',
      '.mjs',     '.js',
      '.web.jsx', '.jsx',
      '.web.ts',  '.ts',
      '.web.tsx', '.tsx',
      '.json'
    ],
modules: [    //指定解析模块的目录
      'node_modules',
      resolve(__dirname, 'node_modules')
    ]
}

6.Devserver

devserver:{
    static: {    //运行代码的目录
      directory: resolve(__dirname, 'build'),
      watch:true //监听文件变化
    },
    watchOptions:{
      ignored:/node_modules/  //忽略文件node_modules
    }
    port:5000, //端口号
    open:true, //自动打开浏览器
    hot:true ,//开始热更新
    client: {
      overlay: true,//出现错误全屏提示
    },
     proxy:{   //跨域代理配置
        ‘/api’:{
        target:'http://localhost:4000'
        },
        pathRewrite:{'^/api': ''}//路径重写，去掉api
    }
    
}

7.optimization

optimization: {
    splitChunks: {
      chunks: 'all',
      maxAsyncRequests:20, //按需加载时的最大并行请求数
      maxInitialRequests:10, //入口点的最大并行请求数
      minSize:50*1024,//分割chunk最小为50 kb
      maxSize：0 ,//分割chunk的最大值不做限制
      minChunks:1 ,//要提取的chunk最少被引用一次
      automaticNameDelimiter：‘～’//chunk 的来源和名称用～连接起来
      cacheGroups: {   //分割chunk组。上述限制在此处仍然有效。
        vendors:{
        test:/[\\/]node_modules[\\/]/ ,   //文件modules中的文件会被打包到vendors模块的chunk中
        priority:-10 //优先级
        }
        default: {
         minChunks:2,
         priority:-20,
         reuseExistingChunk:true //如果当前打包模块和之前的打包过的模块是同一个，直接复用，不需要重新打包。
        },
      },
    },
    runtimeChunk:{  //将当前文件模版记录其它模版的hash值单独打包为一个文件。
     name:entrypoint=>`runtime-${entrypoint.name}`
    },
    minimizer: [
      new TerserPlugin({   //配置生产模式的压缩方案
        parallel: true, //开启缓存
      }),
    ],
  },

babel和webpack的关系

在webpack的配置中少不了要使用babel，那么他们究竟是什么关系呢？

babel：是一个js编译器，可以把浏览器无法识别的代码编译成可识别的。可以独自运行。

webpack：是一个前端常用的静态资源的打包工具。

babel-loader ：将bebel和webpack两个独立的工具联系在一起，可以在webpack打包过程中使用babel的编译功能。

标题功能
babel-cli从命令行使用 Babel 编译文件的简单方法
babel-core以编程的方式来使用 Babel
babel-preset-react编译react代码
babel/preset-env编译最新版本JavaScript

总结：

上面只是总结了常见的属性意义。还有很多属性没有总结，需要移步官网查看。上面只是个人学习过程中整理下来的理解，可能有点偏差。希望大家指正错误。

avatar
文章
阅读
粉丝