09 2020 档案
摘要：webpack的定位是一个bundler，最基本的要解决的是将多个JS模块打包成可以在浏览器上运行的代码。接下来我们将实现一个简易的miniWebpack也就是一个bundler：由入口文件对代码进行打包，打包成可以在浏览器运行的代码。 被打包项目介绍 整个演示项目的目录结构如下所示，其中src下的
阅读全文
摘要：打包时不用命令webpack，而是显式地用node node_modules/webpack/bin/webpack.js，webpack等效于node node_modules/webpack/bin/webpack.js，但是显式地用node命令可以在打包的时候传参--inspect --ins
阅读全文
摘要：在src下新建多个js文件和html模板： 在entry里配置多个入口文件 entry: { index: './src/index.js', list: './src/list.js', }, HtmlWebpackPlugin里配置不同的html页面引用不同的js文件 const plugins
阅读全文
摘要：一、developement和production打包区别 开发环境使用的模式是development模式 需要devServer可以帮助我们开启一个服务器，里面还集成了一些HMR，（HMR的作用：只要更改了代码就会重新打包，内容会实时展现在页面），方面开发。 需要非常全面的SourceMap信息，
阅读全文
摘要：介绍 在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，vue 我们希望能和自己的代码分离开，Webpack 社区有两种方案 CommonsChunkPlugin DLLPlugin 对于 CommonsChunkPlugin，webpack 每次打包实
阅读全文
摘要：Shimming解决的问题 webpack 编译器(compiler)能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量。这些“不符
阅读全文
摘要：利用分块打包，把公共模块和业务模块分开打包，可以提高加载速度，也可以利用缓存提高第二次访问页面的加载速度。这么提高性能非常有限，我们应该尽量的提高代码的利用率，当代码用到的时候再去加载。比如说：可以把onClike后才执行的放到click.js文件里，当onClike事件发生后，再去异步加载clic
阅读全文
摘要：方式一： 用如下命令生成一个打包描述文件stats.json webpack --profile --json > stats.json 然后将输出的json文件上传到如下2个网站进行分析 http://alexkuz.github.io/webpack-chart/ https://github.
阅读全文
摘要：一、举例说明什么是分块打包 项目没有分块打包之前 src/index.js import _ from 'lodash' const arr = [1, 2, 3] console.log(_.join(arr,'_')) 浏览器只请求1个体积大的js文件 缺点： 文件大，加载时间长； 业务代码修改
阅读全文
摘要：1.是什么？ tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。Tree-shaking 是 DCE（dead code elimination） 的一种新的实现。 tree-shaking更关注于无用模块的消除，消除那些引用了
阅读全文
摘要：为什么要区分Develoment 和 Production Develoment环境需要开启devServer方便开发,Production环境需要精简sourceMap和对代码进行压缩、 方式一：不同模式用不同配置文件打包 1.安装webpack-merge合并多个配置文件 npm install
阅读全文
