四个外围概念
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提供了以下几种哈希值：
- 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 等，自行看一下文档