常见Webpack问题
总结：
-
webpack的几个核心概念理解：Chunk、Module、plugin
-
2、常见配置项：entry、output、module、resolve等
- 自定义 loader 怎么配置？
-
Code Splitting 和 Tree Shaking 的区别？懒加载怎么实现？
-
html-webpack-plugin 作用？
-
5、sourceMap不同环境的区别？怎么开启配置？
-
热更新怎么实现？
-
7、webpack原理/执行过程？
- 开发插件的桥梁？
一、核心概念
- Chunk：一个Chunk由多个模块组成
- 定义：一个Entry及其所有依赖的 Module 被分到一个组
- 作用：用于代码合并和分割
- Module：一切皆模块
- plugin：
- 定义：扩展插件，在 webpack构建流程中的特定时机注入
二、常见配置项
- entry：入口文件，用于递归找出所有依赖模块
- output：定义输出位置
-
module：配置解析、转换文件的 策略，如
module.rules中的loader - resolve：用于寻找依赖模块
- alias：别名，简写必备，如
"@c": path.resolve(_dirname, "src/components") - modules：自定义
loader位置 - extention：后缀简写
['jsx', 'js', 'css']
- alias：别名，简写必备，如
自定义 loader 配置
// replaceLoader.js
module.exports = function(source){
return source.replace('cat', 'aqiu');
}
// webpack.dev.js/wepack.prod.js/webpack.config.js
// 配置方法一：直接写自定义 loader 的地址
module.exports = {
module: {
rules: [
test: /\.js/,
use: [
path.resolve(_dirname, './loaders/replaceLoader.js')
]]}}
// 配置方法二：利用 resolveLoader 定义位置
module.exports = {
resolveLoader: ['node_modules', './loaders'], // 引入loader时，逐一在文件夹中查找
module: {
rules: [
test: /\.js/,
use: [
{
loader: 'replaceLoader'
}
]]}}
三、Code Splitting 和 Tree Shaking
- Code Splitting：按需加载 - 代码分割成很多小块，按需异步加载，优化加载性能
- 场景：单页应用的多个路由
- 原理：splitChunks 插件，配置开启
- Tree Shaking：按需打包，移除不需要的模块代码，减小包体积
- 原理：依赖于 ES6模块 的静态结构（编译时）
- webpack 自动开启
懒加载
利用代码分割，首屏不加载一些模块，点击后（执行到 import 语法时），对应的模块才被真正载入
四、html-webpack-plugin
根据 HTML 模版将打包后的 js、css等资源自动插入
五、sourceMap
- 环境：开发环境开启，方便定位问题；生产环境不开启
- 开启：
- 开发环境：
devtool: cheap-eval-source-map(cheap-表示不包含列信息) - 生产环境：
devtool: hidden-source-map
- 开发环境：
六、热更新 HMR
原理：启动项目的时候开启一个 DevServer 服务（使用 websocket协议），一旦代码更新，生成新的 chunkId 和文件，通知客户端，替换指定的模块，完成更新。
-
监听的代码：只包含以 entry 入口递归的依赖，不包括 index.html 等
-
开启方法：
"script": { // 方法一：开启监听 "watch": "weppack --watch", // 方法二：安装模块，直接执行模块 "start": "webpack-dev-server", }方法二安装模块后，可以配置开启热更新、跨域等
七、webpack原理
