随笔分类 - webpack
摘要：正常加载可以认为是并行加载，在同一时间加载多个文件, index.js 中 引入 test.js , 点击按钮之前已经加载了 test.js懒加载：当文件需要使用时才加载构建后:页面一加载,只有index.js 执行了点击按钮后才会加载 test.js预加载 prefetch：会在使用之前，提前加载
阅读全文
摘要：代码分割:1. 可以把一个大的入口文件 分割 成 多个入口文件,实现并行加载,从而速度更快2.可以设置成按需加载,比如单页面开发,整个页面非常庞大,所以要根据路由拆分成多个文件,实现按需加载(拆分文件需要用到webpack拆分)在 webpack 中可以定义多入口，将不同的入口文件打包为不同的 ch
阅读全文
摘要：tree shaking：去除应用程序中没有使用到的无用代码前提： ① 使用 ES6 模块化② 开启 production 环境作用：减少代码体积test.jstest.js 中定义了 通过 ES6 模块 暴露了 add 和 count 两个方法，index.js 中 引入了 add 和 count
阅读全文
摘要：babel 缓存： babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率（已进行了 bable 兼容性处理的 js 进行缓存，再次构建的时候就不用重新 babale-loader 处理兼容问题） 设置：cacheDirectory：tr
阅读全文
摘要：多个 loader，但是每个文件只能匹配一个 loader，被一个 loader 处理，因此可以使用 oneOf 唯一匹配，不需要每个文件把所有的 loader 都询问一遍，可以提高 loader 的执行效率webpack.config.js:const {resolve} = require('p
阅读全文
摘要：source-map：一种提供源代码 到 构建后 代码映射技术（如果构建后的代码出错了，通过映射可以追踪源代码的错误）打开webpack.config.js source-map ：外部，错误代码准确信息 和 源代码的错误位置 devtool的全部值:devtool的全部值及介绍 /* source
阅读全文
摘要：HMR: hot module replacement 热模块替换 / 模块热替换作用: 一个模块发生变化, 只会重新打包这一个模块(而不是打包所有模块)极大提升构建速度 (开发环境) html文件: 默认不能使用HMR功能, 同时会导致问题:html文件不能热更新了~(不用做HMR功能)解决: 修
阅读全文
摘要：runtimeChunk (生产环境)// 解决: 修改a文件 导致b文件的 contenthash变化,从而导致缓存失效 minimizer 修改压缩js 和css 的方案安装 cnpm i terser-webpack-plugin –D 插件
阅读全文
摘要：使用dll技术, 对某些库 (第三方库:jquery, react, vue...)进行单独打包, (优化重复打包)需要一个配置文件 webpack.dll.jsconst {resolve} = require('path')const webpack = require('webpack') module.exports = { entry:{ jquery:['jqu...
阅读全文
摘要：当 js 文件 是通过 cdn 加载到页面上的，webpack 打包时，需要忽略这一类库的打包，就需要在 webpack 配置中添加 externals 配置，如当页面上 jQuery 库通过 cdn 方式加载，externals 需要过滤掉 jQuery库的打包:const {resolve} = require('path')const HtmlWebPackPlugin = require(...
阅读全文
摘要：cnpm i thread-loader –D 开启多进程打包,进程启动大概为600s,进程通信也有开销(适合大项目使用)const { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin') process.env.NODE_ENV = 'production' modul...
阅读全文
摘要：PWA：渐进式网络开发应用程序(离线可访问)，需要通过serviceWorker 实现， 首先，webpack 配置使用 workbox-webpack-plugin 这个插件，生成一个 serviceWorker 配置文件 引入插件: 在plugins插件入口处引入插件 接着，在入口文件 inde
阅读全文
摘要：HMR: hot module replacement 热模块替换 / 模块热替换 webpack配置-source-map（让错误无处可逃） webpack优化系列-oneOf wepack与浏览器缓存-contenthash webpack-tree shaking(树摇) webpack-co
阅读全文
