vite虽香，但webpack还是要学的。

码农天地 - 2020-10-23 17:34:33

---

四个核心概念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:'http:baidu.com'
 }
} 

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

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

哈希值

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

hashchunkhash (同一个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

一些常用的loadercss相关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-loaderfile-loaderhtml-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-loadervue-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 等，自行看一下文档

Tags 标签