讲在前面
最近在学习 webpack4 的相关知识，整理了一个 webpack4 的基础模板 ===> 戳我 <===，涵盖了常用功能及注意事项，如果有帮助还请 star ~
- 学习
webpack4的话最好的还是 官方文档指南，注意，初次接触时先看 指南 部分，直接看 配置 或者 API 越看越懵
初次接触建议按照指南走一遍
以下为遇到的一些问题及思考
webpack4 打包出来的东西都是什么，什么时候会打包出一个文件，什么时候会多个？
webpack 打包出的各种 js 文件大致分为两类，一种是 entry 字段指定的入口文件，此类文件打包的结果我们暂且叫做 bundle；除了前面说的，剩余的比如通用文件，外部文件，运行时等等，打包出的文件叫做 chunk
如何打包出多个文件 ？
官方传送门 - 代码分离
1、多个入口文件打包时会被分离
entry: {
app: '../src/index.js',
print: '../src/js/print.js'
},
2、配置了 Optimization.splitChunks 字段后，会将 异步?？?/strong> 和 通用?？?/strong> 进行单独打包，这有个不错的文章 一步一步的了解webpack4的splitChunk插件
optimization: {
splitChunks: {
chunks: 'all'
},
},
什么是异步模块 ？
异步?？?/strong> 也就是常说的 懒加载?？?/strong>，是在打开页面时不去加载，通过某些行为才触发加载。比如用户点击按钮后才去获取 xxx.js
实现异步加载的方式有 两种：
一种是 webpack 提供的 require.ensure 方法，以下为异步引入 ?？锽，?？锽 依赖于 ?？锳
...
require.ensure(["?？锳"], function(require) {
var foo = require("?？锽");
});
...
另一种是 ES2015 的 import() 语法
...
import('?？镃')
...
什么是 treeshaking ？
- 我想要使用
lodash中的chunk方法，但是直接导入lodash并打包显然很冗余，因为我就用chunk那个方法而已，多了没用。treeshaking就负责帮你只引用chunk，把多余的代码像摇树一样摇掉。 -
treeshaking是基于ES6的import和export语法，我在实践中遇到了以下几个问题
1. 如下语法无效
import { chunk } from 'lodash'
lodash 模块不支持 ES6 写法，需要使用 lodash-es 模块
2. 参照官网使用 webpack.ProvidePlugin 的 treeshaking 写法无效
官网写法：
plugins: [
new webpack.ProvidePlugin({
- _: 'lodash'
+ join: ['lodash', 'join']
})
]
目前写法：
new webpack.ProvidePlugin({
_join: "lodash-es/join" // lodash/join 也可
})
3. treeshaking 在 development 模式下无效，production 下效果正常
4. 还有一种情况也会导致 treeshaking 无效。当你使用 babel 进行语法转换时， babel 有可能会将你的 import 语法进行了转换，而 treeshaking 是基于 import 语法的。你需要做的是把 babel 的配置文件 .babelrc 中添加如下字段 "modules":false
{
"presets": [
[
"env",
{
"modules": false,
}
]
]
}
PS：modules 字段用于将 ES6 写法转换为 CommonJS、AMD 等规范的写法，false 就是保留 ES6 的 import 写法，不进行转换
通过标签方式引入图片无效 ？
- 通过标签方式引入图片，即便是只使用
html-loader和url-loader，依旧需要安装file-loader
<body>
<div>这是一段测试文字</div>
<img src="src/imgs/123.jpg" alt="">
<img src="src/imgs/22.jpg" alt="">
</body>
ExtractTextWebpackPlugin 无效 ？
-
ExtractTextWebpackPlugin，这个插件在提取
index.js中导入的css时，如果使用3.0.2这个版本会有问题，需要使用最新的
npm i -D extract-text-webpack-plugin@next
webpack devtool 里的 7 种 SourceMap 模式是什么鬼？
devtool:"cheap-module-source-map" 会 单独提出 .map 文件；其他的方法，比如："cheap-module-eval-source-map" 会将 source-map 映射 合并 在打包文件中，而 source-map 的映射与某个方法是否被调用无关，因此当映射被合并在 bundle 中时，搜索方法依旧会被搜索到，只不过是在 source-map 的映射中。
开发环境建议：cheap-module-eval-source-map
生产环境建议：cheap-module-source-map
考虑清楚你需不需要这玩意，不需要索性就关掉这个功能 devtool: 'none'
关于 library 相关字段
比如我自己写了个 library，想打包成支持 AMD，CommonJS，import 等多种方式引用
-
libraryTarget设置成通用?？楣娣?umd
module.exports = {
mode:"production",
output: {
library: "MyModule",
libraryTarget: "umd"
}
}
使用 RequireJS 引入的话：
<body>
<script src="./dist/main.js"></script>
<script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
<script>
require(['dist/main.js'], function (factory) {
factory()
})
// 如果不引入 RequireJS , 可以在全局中找 MyModule
// console.log(MyModule)
</script>
</body>
避免 import / export，require / module.exports 混写
-
import不能与module.exports搭配 -
require可以与export搭配 - 总之不要混写
其他注意事项
- 在 webpack 配置文件中，process.env.NODE_ENV === 'production' ? 'a.bundle.js' : 'b.bundle.js' 这样的条件语句，无法按照预期运行
-
less-loader将less转换为css -
css-loader以import方式引入css -
style-loader将css作为标签插入 -
url-loader可以限制大小一定的图片装换为base64 -
多页面配置
-
optimization.splitChunks
提取公共部分1
提取公共部分2 -
module chunk bundle
image.png
image.png -
path.join和path.resolve
1.join是把各个path片段连接在一起，resolve把／当成根目录
path.join('/a', '/b');
// /a/b
path.resolve('/a', '/b');
// /b
2.resolve 在传入非/路径时，会自动加上当前目录形成一个绝对路径，而 join 仅仅用于路径拼接
// 当前路径为
/Users/xiao/work/test
path.join('a', 'b', '..', 'd');
// a/d
path.resolve('a', 'b', '..', 'd');
// /Users/xiao/work/test/a/d
- 自动刷新，热更新：一个是刷新（状态会丢失），一个是即时更新
常用插件
-
webpack.DefinePlugin 定义变量
-
CleanWebpackPlugin 清空打包路径
-
mini-css-extract-plugin 只用于生产环境抽离 css，即样式不在 style 标签内
-
happyPack 多进程打包
-
ParallelUglifyPlugin 多进程压缩 js 代码
-
DllPlugin 用于将不常更新的包预打包以便今后直接引用
优化
- 优化
babel-loader
image.png - 公共代码抽离
splitChunks - 名字中携带
hash以便命中缓存 - 多进程打包
happyPack和代码压缩 - 小图片 base64
- 懒加载
- CDN
