讲在前面
最近在学习 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 字段后，会将 异步模块 和 通用模块 进行单独打包，这有个不错的文章 一步一步的了解webpack4的splitChunk插件
optimization: {
splitChunks: {
chunks: 'all'
},
},
什么是异步模块 ？
异步模块 也就是常说的 懒加载模块，是在打开页面时不去加载，通过某些行为才触发加载。比如用户点击按钮后才去获取 xxx.js
实现异步加载的方式有 两种：
一种是 webpack 提供的 require.ensure 方法，以下为异步引入 模块B，模块B 依赖于 模块A
...
require.ensure(["模块A"], function(require) {
var foo = require("模块B");
});
...
另一种是 ES2015 的 import() 语法
...
import('模块C')
...
什么是 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-source-map
cheap-module-eval-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搭配 - 总之不要混写
网友评论