6.webpack^4.42.1文档学习

思考: 在学习webpack之前， 如果不通过构建工具去构建项目，我们一般是通过scipt或者link标签去引入样式或者js代码，这叫代码逻辑的抽离封装，有了类似webpack这样的构建工具以及AMD、CMD、commonjs、es6之后，咋们管他叫做模块化开发。但是由于这些高级语法目前在浏览器还不完全支持。因此，我们要借助打包构建工具将其转化成内部实现的具有nodejs，requirejs或es6模块化导入导出的功能。关于到保护导入导出的实现，webpack内部实现的导入导出----- 这篇文章描述得很详细。

1.在我们之前码代码的时候，我们总是像抽离公共的代码，但是如果是多人开发，难免会遇到多人在自己的模块引入和别人相同的外部模块，此时如果webpack没有相关配置，会在这些各自的bundle里被各自引入，这就造成了冗余，如果项目足够大，依赖复杂，那么会影响加载性能，那么怎么优化呢?

首先是要做code-split（代码分离）
官方给出了三种优化的方式:

入口起点：使用 entry 配置手动地分离代码。
防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
动态导入：通过模块的内联函数调用来分离代码。

1.1 entry、output配置

这种配置实际是将代码输出为多个文件。
缺点：不能提取出文件间引用的公共代码。

1.2 使用插件CommonsChunkPlugin

使用：
webpack配置文件中

const webpack = require('webpack');
module.exports = {
	...
	plugins: [
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common-code' 
     })
	]
}

重新打包输出

npm run build

输出dist中会多出common-code.bundle.js文件，其中就是多个入口文件中引用的公共代码。

1.3 使用dynamic imports（动态导入）

// scr/index.js

...
// 静态导入
//import _ from "lodash"
//console.log(_)
// 动态导入
import(/* webpackChunkName: "lodash" */ 'lodash').then(_=>{
    console.log(_)
})

可以看到dist中相比于静态导入多了一个单独文件—vendors~lodash.bundle.js，此文件就是动态导入下webpack分离出来的依赖于loadsh的代码文件。

webpack有很多，打包后输出文件的分析工具，vue-cli@3.0通过vue ui打开图形控制界面，build后会看到一些图形化的分析。类似就是这些工具。

至此，今天学习了代码分离的基本思路，还需深入了解啊。