在webpack配置文件中配置多个入口
entry:{ main: './src/main.js', other: './src/other.js' }, output:{ path: path.join(__dirname, '..', './dist'), filename: '[name].js', publickPath: 'http://www.likecs.com/' }
在main.js 和 other.js 中都共同引入一个模块， 并使用其功能
Main.js
import $ from 'jquery' $(() => { $('<div></div>').html('main').appendTo('body') })
other.js
import $ from 'jquery' $(() => { $('<div></div>').html('other').appendTo('body') })打包文件，可以看到 main 和 other 打包的文件中都加载的了 jquery
3.2抽取公共代码webpack4 以上使用的插件为 SplitChunksPlugin，webpack4 之前的使用的 CommonChunkPlugin已经被移除，最新版本的webpack中只需要在配置文件中的optimization节点下添加一个splitChunks属性即可进行相关配置
修改配置文件
optimization splitChunks:{ chunks: "all" } }
打包查看文件
打包之后会将各自的入口文件进行打包，额外会再生产一份js文件，此文件中就是各个chunk中所引用的公共部分
splitChunksPlugin 配置参数
SplitChunksPlugin 的配置只需要在 optimization 节点下的 splitChunks 进行修改即可，如果没有任何修改，则会使用默认设置
默认的 SplitChunksPlugin 配置适用于绝大多数用户
webpack 会基于如下默认原则自动分割代码
公用代码块或者来自 node_modules 文件夹的组件模块
打包的代码块大小超过30kb，最小化压缩之前的
按需加载代码块时，同时发送的请求最大数量不应该超过5
页面初始化时，同时发送的请求最大数量不应该超过3
SplitChunksPlugin 默认配置
module.exports = { optimization: { splitChunks: { chunks: 'async', // 只对异步加载的模块进行拆分，import('jquery').then()就是典型的异步加载，可选项还有 all | initial minSize: 30000, // 模块最少大于 30kb 才会拆分 maxSize: 0, // 为0时模块大小无上限，只要大于 30kb 都会拆分。若是非0，超过了maxSize的值，会进一步拆分 minChunks: 1, // 模块最少引用一次才会拆分 maxAsyncRequests: 5, // 异步加载时同时发送的请求数量最大不能超过5，超过5的部分不拆分 maxInitialRequests: 3, // 页面初始化时，同时发送的请求数量最大不能超过3，超过3的不跟不拆分 automaticNameDelimiter: '~', // 默认的连接符 name: true, // 拆分的chunk名，设置为true表示根据模块名和CacheGroup的key来自动生成，使用上面的连接符连接 cacheGroups: { // 缓存组配置，上面配置读取完成后进行拆分，如果需要把多个模块拆分到一个文件，就需要缓存，所以命名为缓存组 vendors: { // 自定义缓存组名 test: /[\\/]node_modules[\\/]/, // 检查 node_modules 目录，只要模块在该目录下就使用上面配置拆分到这个组 priority: -10, // 权重为-10，决定了那个组优先匹配，假如node_modules下面有个模块要拆分，同时满足vendors和default组，此时就会分到 priority 值比较大的组，因为 -10 > -20 所以分到 vendors 组 filename:'vendoes.js' }, default: { // 默认缓存组名 minChunks: 2, // 最少引用两次才会被拆分 priority: -20, // 权重 -20 reuseExistingChunk: true // 如果主入口中引入了两个模块，其中一个正好也引用了后一个，就会直接复用，无需引用两次 } } } } }; 3.3动态导入(懒加载)webpack4默认是允许import语法动态导入的，但是需要babel的插件支持，最新版babel的插件包为:@babel/plugin-syntax-dynamic-import,需要注意动态导入最大的好处就是实现了懒加载，用到那个模块才会加载那个模块，可以提高SPA应用程序的首屏加载速度，三大框架的路由懒加载原理一样
安装
npm i -D @babel/plugin-syntax-dynamic-import
修改 .babelrc ，添加 @babel/plugin-syntax-dynamic-import 插件
{ "presets": ["@babel/env"], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import" ] }
将jq模块动态导入
function getDivDom(){ // import('jquery') 返回的是一个 promise，若是低版本需要注意 return import('jquery').then(({default: $}) => { return $('<div></div>').html('动态导入') }) }
给某个按钮添加点击事件，点击后调用getDivDom函数创建元素并添加到页面
window.onload = () => { document.getElementById('btn').addEventListener('click',() => { getDivDom().then(item => { item.appendTo('body') }) }) } 4.noParse