摘要：
webapck配置目录 开发环境webpack.dev.js const webpack = require('webpack'); const devConfig = { mode: 'development', devtool: 'cheap-module-eval-source-map', d 阅读全文
摘要：
以 jquery 为例，代码如下 // index.js import $ from 'jquery' $('body').html('HHAHAH') import func from './test.js' func() // test.js export default function fu 阅读全文
摘要：
缓存 场景 生产环境中，我们配置output,输出打包配置,代码分割配置，第三方的库会被打包到vendors文件 optimization: { usedExports: true, splitChunks: { chunks: 'all', cacheGroups: { vendors: { te 阅读全文
摘要：
我们之前写的css文件都会被打包进js文件中，要想把css单独打包成一个css文件该怎么做呢？ 这个时候就需要用到 MiniCssExtractPlugin 开发环境用不到这个功能（因为这个东西不支持热模块更新，样式更改自动替换，不用刷新页面），一般都是用在生产环境中。 安装： npm instal 阅读全文
摘要：
它可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，针对这些，我们可以进行文件分割等操作。 分析内容：如图所示，打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何步骤如下：1. 安装：npm install web 阅读全文
摘要：
Lazy Loading 异步import的包会被单独打成一个chunk， 新建index.js入口文件，import(),这个是异步加载模块方式， vue的路由路由懒加载就是如此 async function getComponent() { const { default: _ } = awai 阅读全文
摘要：
当你把所有的代码都打包到一个文件的时候，每次改一个代码都需要重新打包。且用户都要重新加载下这个js文件。但是如果你把一些公共的代码或第三方库抽离并单独打包。通过缓存加载，会加快页面的加载速度。（分割成多个文件，不必打包成一个文件，提高性能） 异步加载的代码，webpack会单独打包到一个js文件中 阅读全文
摘要：
因为在不同的环境下，webpack的配置稍微有点区别，如果我们需要在不同的换将下切换，就得重复修改webpack.config.js配置，这是很麻烦而且还容易改错，所以我们需要把配置文件进行拆分。 在项目根目录下新建build文件夹，然后在build文件夹中新建 webpack.dev.js 、 w 阅读全文
摘要：
什么是 Tree-Shaking 用来在打包编译成 bundle 时消除 ES6 Module 语法中未使用到的代码和模块。 比如入口文件引入这个math.js模块，有add,min方法，只引入add方法，但是打包后的文件中还自动引入了min方法，多次一举，浪费性能，使用tree-shaking(树 阅读全文
摘要：
Enter与Output基础配置 需求一；我们需要将打包后输出两个js文件 module.exports = { mode: 'development', entry: { main: './src/index.js', sub: './src/index.js' }, entry可以接收一个对象， 阅读全文