安装
npm install webpack webpack -D
然后通过 npx webpack -v 查看版本号，这个时候查看的就是当前目录下面的webpack
loader
webpack不能识别非js结尾的文件，这个时候就需要loader来做处理
plugin
可以在webpack运行到某个时刻的时候，帮忙做一些事情
html-webpack-plugin 会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到这个html文件中
然后还可以自己制定模板
clean-webpack-plugin 自动清除制定目录
[图片上传失败...(image-50a50a-1560925259310)]
Entry和Output配置
打包多个文件，在output的filename配置成自动获取entry里面的键名
当我们的静态资源需要部署到cdn上或者另外的服务器上，可以在output里面配置publicPath，打包完之后，模板里面就会自动带上指定的域名了
SourceMap 配置 开发环境
当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置
为了更容易地追踪 error 和 warning，JavaScript 提供了 source map 功能，可以将编译后的代码映射回原始源代码
cheap-module-eval-source-map 推荐开发环境使用，所有的错误(包括依赖包)都会被显示出来，同时速度比较快
cheap-module-source-map 推荐线上环境使用，
webpack-dev-server 自动更新，提升效率
命令开启的时候，dist目录会放到内存中，项目中暂时看不到dist
模块热更替 HMR
因为HRM是webpack内置的功能，所以在配置文件里先引入webpack
const webpack = require('webpack')
当我们在某个模块里面引入了其它模块，然后被引入的模块更改后，页面不要刷新，而只是更新被引入模块，就需要在模块里面进行一些配置
if(module.hot){
module.hot.accept('./count', () => {
count()
})
}
这里的意思是，如果count模块更改，就执行后面的回调函数
通过babel转换JS代码
https://www.babeljs.cn/setup#installation 里面查找打包工具
首先在rules里面加入
然后在根目录加入.babelrc配置文件
上面使用了babel的polyfill功能，把低版本浏览器未实现的方法，通过腻子脚本来实现，这里只会打包使用到的polyfill
在代码里面引入polyfill就可以使用了，这种方式适用于业务代码，如果想打包包文件，可以使用transform-runtime
"presets": [["@babel/preset-env",{ // 业务
"useBuiltIns": "usage"
}]],
"plugins": [ // 包打包
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
Tree shaking
只打包我们我们使用文件中的内容
optimization: {
usedExports: true
}
上图配置的sideEffects的意思是，对所有文件都执行tree shaking，如果我们想忽略某些文件，可以这么使用
sideEffects: [".css",".less"] 这样即使css或者less没有导出模块，treeshaking也不会忽略掉
但是在开发模式中，我们打包完的文件里面还是能看到全部的代码，这是因为如果开发的时候，treeshaking帮我们删除了一些代码，在代码出错提示的时候，行数就可能会出错。但是在生产环境就没有这个问题，只会打包引用的内容
开发模式和生产模式
通常开发和生产环境的打包配置文件有区别，这个时候我们可以把公共部分抽取出来，然后在我们打包的时候，通过merge把公共的配置加载进去，然后执行不同的配置文件
Code Splitting
默认方式
optimization: {
splitChunks: {
chunks: 'all'
}
}
异步方式需要先通过babel转码
Lazy loading 懒加载 Chunk
打包生成的每个文件都算一个chunk，懒加载就是延迟加载chunk
打包分析 Preloading Prefetching
webpack 官方打包工具分析 通过这个里面提供的命令，可以生成一份json文件，然后把json文件传到这个地址就可以进行分析了
或者使用命令工具，自动生成完整的的信息 webpack-bundle-analyzer
查看代码利用率 使用ctrl+shift+p 然后查找coverage
prefetch 等待核心代码加载完成后，然后再加载异步代码
CSS 文件的代码分割
minicssextractplugin 目前还不支持HMR 所以最好是用在线上的环境
这里需要注意treeshsaking的问题，因为treeshaking会把引入而没有使用的文件忽略掉，所以，我们要现在package里面把指定的文件进行配置
如果一个文件在模本里面被直接引用，打包的文件名就是filename，而不再模板里面的就走chunkfilename
如果在需要css代码压缩和合并，还需要另外一个插件
Webpack 与浏览器缓存
当我们配置contenthash后，文件内容不改动，重新打包的文件名是不会发生改变的
shimming 垫片
当我们使用的第三方库依赖某些包的时候
这个文件没有引入jquery，但是又使用了jquery提供的方法，所以需要在webpack配置文件中加一个插件
当页面中所有地方使用到$这个变量的时候，webpack会自动帮我们引入jquery
PWA 配置
workbox-webpack-plugin 因为这个插件只在线上使用，所以只用在线上的配置文件里面引入就可以了
然后还需要在业务代码里面使用生成好的service-worker文件
if('serviceWorker' in navigator){
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').
then(registration => {
console.log('registed')
}).catch(error => {
console.log(error)
})
})
}
使用webpackDevServer 实现请求转发
会把所有的请求代理到dell-lee的域名下面
如果接口地址不变，而又想拿另外一个接口的数据，例如请求的还是header.json 但因为这个接口还在开发中，只能提供一个假接口demo.json 这个时候就可以使用下面的配置
当被代理网站有防爬虫的时候开启
dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其 文档 在这个文档里面，就可以配置更多的东西了，例如header，auth
webpack-dev-server 单页路由
当我们在配置单页路由的时候，需要把不存在的路径全部指向到index，就可以这么配置 这个是在开发环境
historyapifallback 会把所有404都指向到默认页面
Eslint 安装
npm install eslint --save-dev
npx eslint --init // 初始化
Webpack 优化
跟上技术的迭代（Node,Npm,Yarn）
在尽可能少的模块上引用loader
Plugin尽可能精简并确保可靠
resolve 参数合理配置
- 使用DllPlugin 提高打包速度 应为第三方模块基本不会改变，所以可以针对第三方模块单独打包，这样每次webpack打包的时候，就不用再去分析第三方模块了。然后通过映射关系，使用第三方插件的时候，就不读取node_modules里面的文件了，而是读取我们打包完成的文件
- 首先单独配置一份dll的配置文件 这样指定的第三方模块就打包在一起了
const path = require('path');
module.exports = {
mode: 'production',
entry: {
vendors: ['react','react-dom','lodash'] // 把这三个包打包在一起
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, '../dll')
}
}
// 命令 "build:dll": "webpack --config ./build/webpack.dll.js"
2. 然后把打包的文件，通过一个全局变量暴露出去
3. 然后再增加一个插件add-asset-html-webpack-plugin 把我们打包好的文件添加到模板里面
4.但是到这里，我们代码里面还是使用的是第三方的包，并没有使用我们打包好的文件，下面我们需要生成一个映射文件，在webpack打包的时候，如果发现第三方包在映射文件内，就直接取我们打包好的文件，下面是配置 还是webpack.dll.js
5.然后再common配置文件里面，再增加一个插件，把我们刚生成的manifest映射文件引入进来，然后自动帮我们处理映射关系
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, '../dll/vendors.dll.js')
}),
new webpack.DllReferencePlugin({ // 就是这个
manifest: path.resolve(__dirname, '../dll/vendors.manifest.json')
})
6.最后，当我们要打包的文件分为多个，那怎么办呢 首先配置webpack.dll.js
[图片上传失败...(image-e9dc73-1560925259310)]
https://github.com/tinyzh/tinyzh.github.io/tree/master/webpack-dllplugn)
- 缩小包的大小
- 多进程打包
- 合理使用sourceMap
- 结合stats分析打包结果
- 开发过程中，剔除无用插件，例如开发过程中不需要代码压缩，配置文件的mode就选择development就行
