四个核心概念

entry(入口)

entry是整个配置文件的入口，没有之一。

entry有两种入口，四种配置。

两种入口

• 单文件入口

• 多文件入口

四种配置

• value为字符串

• value为对象

• value为数组

• 函数

代码演示

第一种配置（字符串），主要用在单页面应用

const { resolve } = require('path')
module.exports = {
  entry:resolve(__dirname,'src/index.js')
}

第二种配置（对象），主要用在多页面应用

const { resolve } = require('path')
module.exports = {
  entry:{
    test:resolve(__dirname,'src/index.js'),
    test2:resolve(__dirname,'src/index2.js')
  }
}

第三种配置（数组），这种配置可能比较少用，也是用在单页面应用，这种配置主要将数组的1-n项，打包到0项上，有时会用在js兼容，动态链DLL上

const { resolve } = require('path')
module.exports = {
  entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')],
}

第四种配置（函数），函数只要返回上面三种的其中一种就可以

const { resolve } = require('path')
module.exports = {
  entry:()=>'./src/index.js',
}

output

既然有入口，那就肯定有出口啦！就好像人，要吃饭也要拉*。这里的出口就是打包好的东西要把它放在哪里。

output的常用配置

• path(输出的位置，默认dist目录下)

• filename(输出文件的乳名，默认main)

• pulibPath(指定打包后的文件应该在哪里引用，一般用在生产环境,默认空)

代码演示

const { resolve } = require('path')
module.exports = {
  output:{
    path:resolve(__dirname,'dist'),
    filename:'bundle.js',
    publicPath:'JS中文网 - 全球极客挚爱的技术成长平台 https://www.javascriptc.com/'
  }
}

filename的几种配置，可以直接像上面一样写死，也可以文件名加hash值动态设置，比如这样

module.exports = {
  output:{
    filename:'[name]_[hash].js'
  }
}

哈希值

webpack提供了以下几种哈希值：

• hash

• chunkhash (同一个chunk同一个hash)

• contenthash (一个文件一个hash)

module

module.rules就是loader的配置位置，loader用于解决一些代码的兼容性。

module.rules的常用配置

• test (loader的匹配规则)

• exclude (排除哪些文件不需要匹配)

• include (只匹配哪些文件)

• loader (使用哪个loader,单个)

• use (使用哪些loader,多个)

代码演示

  module.exports = {
   module:{
    rules:[
      {
        test:/\.html$/,
        exclude:/node_modelus/,
        include:/src/,
        loader:'html-loader',
      },
      {
        test:/\.css/,
        use:['style-loader','css-loader']
      }
    ]
  }
}

loader的常用配置

• loader (使用哪个loader)

• options (传给loader的参数，loader的不同，options的参数也不同)

代码演示

module.exports = {
  module:{
    rules:{
      test:/\.js$/,
      exclude:/node_modelus/,
      use:[
        // 没参数
        'thread-loader',
        // 有参数
        {
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
        }
      ]
    }
  }
}

plugins

plugins是配置插件的位置，它是一个数组,插件大多数情况是用于代码的优化。

插件没有没有统一的用法，因插件而异。硬是要说它们有相同之处那就是 new xxx

一些常用的loader

css相关

• style-loader ( 处理style内联样式 )

• css-loader （处理.css文件）

• postcss-loader （处理css兼容）

• less-loader （处理.less文件）

• sass-loader （处理.sass/.scss文件）

let comment = [
  "style-loader",
  "css-loader",
  {
    loader:"postcss-loader",
    options:{
      postcssOptions:{
        plugins:['postcss-preset-env']
      }
    }
  }
]
module.exports = {
  module:{
    rules:[
      {
        test:/\.css/,
        use:[
          ...comment
        ]
      },
      {
        test:/\.less$/,
        use:[
          ...comment,
          'less-loader'
        ]
      }
    ]
  }
}

js相关

• babel-loader

• @babel/core

• @babel/preset-env

• @babel/polyfill

module.exports = {
  entry:['@babel/polyfill','./src/index.js']
  ...
  module:{
    rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader:'babel-loader',
            options:{
              presets:['@babel/preset-env']
              // 或者
              presets:[['env',{module:false}]]
            }
          }
        ]
      }
    ]
  }
}

文件相关

• url-loader

• file-loader

• html-loader

  module.exports = {
    ...
    module:{
      rules:[
        {
          test:/\.(png|jpg|gif)$/,
          use:[
            {
              loader:file-loader,
              options:{
                limit:4 *1024,
                name:'img/[name]_[hash:10].[ext]'
              }
            }
          ]
        },
        {
          test:/\.html$/,
          loader:'html-loader'
        }
      ]
    }
  }

vue相关

• vue-loader

• vue-style-loader

  module.exports = {
    ...
    module:{
      rules:[
        {
          test:/\.vue$/,
          loader:'vue-loader'
        },
        {
          test:/\.css$/,
          use:[
            'vue-style-loader',
            'css-loader'
          ]
        }
      ]
    }
  }

优化

开发环境

• HRM (热替换)

• webpack-dev-server （本地服务器）

• soure-map （调试）

• webpack-bundle-analyzer（打包生成代码块分析视图）

• size-plugin（监控打包资源的体积变量化）

• speed-measure-webpack-plugin（分析loader和plugin打包的耗时）

生产环境

体积优化

• css提取（mini-css-extract-plugin）

• css压缩 （optimize-css-assets-webpack-plugin）

• html压缩 （html-webpack-plugin ）

• externals （排除不需要被打包的第三方）

• js压缩 （production模式自动开启）

• tree-shake ( production模式自动开启(webpack4限EsModule;webpack5不限EsModule,CommonJs,优秀得很) )

• code-split ( optimization )

• import(懒加载，预加载（预加载慎用））

打包速度优化

• 多线程打包（thread-loader 、happyPack

• 动态链 （ DLL ）

• babel缓存（ 缓存cacheDirectory ）

• exclude / exclude (排除一些不需要编译的文件)

• module.noParse (排除不需要被loader编译的第三方库)

注意

• webpack优化需要看自己的项目情况去对症下药，不是看到什么有意思就用上去；如果是这样会给自己挖坑，有可能也把自己给埋了。

其他

• resolve （配置模块如何解析）

• 更多配置，loader,plugin 等，自行看一下文档

作者：Da裤衩
链接：https://juejin.im/post/6883305742422507533