四个核心概念
entry(入口)
entry是整个配置文件的入口,没有之一。
entry有两种入口,四种配置。
两种入口
- 单文件入口
- 多文件入口
四种配置
- value为字符串
- value为对象
- value为数组
- 函数
代码演示
「第一种配置(字符串),主要用在单页面应用」
1 2 3 4 | const { resolve } = require('path') module.exports = { entry:resolve(__dirname,'src/index.js') } |
「第二种配置(对象),主要用在多页面应用」
1 2 3 4 5 6 7 | const { resolve } = require('path') module.exports = { entry:{ test:resolve(__dirname,'src/index.js'), test2:resolve(__dirname,'src/index2.js') } } |
「第三种配置(数组),这种配置可能比较少用,也是用在单页面应用,这种配置主要将数组的1-n项,打包到0项上,有时会用在js兼容,动态链DLL上」
1 2 3 4 | const { resolve } = require('path') module.exports = { entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')], } |
「第四种配置(函数),函数只要返回上面三种的其中一种就可以」
1 2 3 4 | const { resolve } = require('path') module.exports = { entry:()=>'./src/index.js', } |
output
既然有入口,那就肯定有出口啦!就好像人,要吃饭也要拉*。这里的出口就是打包好的东西要把它放在哪里。
output的常用配置
- path(输出的位置,默认dist目录下)
- filename(输出文件的乳名,默认main)
- pulibPath(指定打包后的文件应该在哪里引用,一般用在生产环境,默认空)
代码演示
1 2 3 4 5 6 7 8 | const { resolve } = require('path') module.exports = { output:{ path:resolve(__dirname,'dist'), filename:'bundle.js', publicPath:'http:baidu.com' } } |
「filename的几种配置,可以直接像上面一样写死,也可以文件名加hash值动态设置,比如这样」
1 2 3 4 5 | 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,多个)
代码演示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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的参数也不同)
代码演示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | module.exports = { module:{ rules:{ test:/.js$/, exclude:/node_modelus/, use:[ // 没参数 'thread-loader', // 有参数 { loader:'babel-loader', options:{ presets:['@babel/preset-env'] } } ] } } } |
plugins
plugins是配置插件的位置,它是一个数组,插件大多数情况是用于代码的优化。
插件没有没有统一的用法,因插件而异。硬是要说它们有相同之处那就是
一些常用的loader
css相关
- style-loader ( 处理style内联样式 )
- css-loader (处理.css文件)
- postcss-loader (处理css兼容)
- less-loader (处理.less文件)
- sass-loader (处理.sass/.scss文件)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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 等,自行看一下文档