随笔分类 - webpack
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-p
阅读全文
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); // 设置nodejs环境变量 设置开发环境的配置，默认看生产环境 // process.env.NODE_EN
阅读全文
摘要：1. 开发环境性能优化 1.1 优化打包构建速度 1.1.1 HMR https://www.cnblogs.com/PHY01/p/15654771.html 1.2 优化代码调试 1.2.1 source-map https://www.cnblogs.com/PHY01/p/15654780.
阅读全文
摘要：npm i -D thread-loader 和babel-loader一块使用 thread-loader可以放在需要多线程处理的loader的最上方，最后执行 开启多线程打包，进程启动大概600ms，进程通信也要开销，因此，只有工作消耗时间比较长，才需要多线程打包。 use: [{ loader
阅读全文
摘要：渐进式网络开发应用程序（离线可访问） npm i -D workbox-webpack-plugin const WorkboxPlugin = require('workbox-webpack-plugin'); ...... plugins:[ new WorkboxPlugin.Generat
阅读全文
摘要：将打包一个chunk文件分成多个文件，可以实现各项功能，实现按需加载。（多个js文件并行加载，速度更快） 方式一：多入口 （不常用） //多入口，webpack后会生成对应个chunk文件 entry:{ index:'./src/js/index.js', test:'./src/js/test.
阅读全文
摘要：懒加载：当文件需要使用时才加载 预加载：会在使用之前，提前加载js文件（等其他资源加载完毕，浏览器空闲了，在偷偷加载资源，适用于pc端）兼容性问题严重，caniuse查看是否使用该技术 扩展：正常加载可以认为是并行加载（同一时间加载多个文件） //test.js console.log('tes
阅读全文
摘要：使用dll技术，对某些库（第三方库：jquery，react，vue...）进行单独打包，仅打包一次 新建webpack.dll.js文件，该文件用于配置需要单独打包的库 const { resolve, join } = require("path"); const webpack = requi
阅读全文
摘要：source-map [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map 一种提供源代码到构建后代码映射技术（如果构建后代码出错，通过映射可以追踪源代码错位） 1、使用：devtool:'source-map' 1）devto
阅读全文
摘要：HMR(hot module replacement热模块替换) 一个模块发生变化，只会重新打包这一个模块，极大提升构建速度。 启用HRM 更新 webpack-dev-server 配置， 然后使用 webpack 内置的 HMR 插件。 devServer: { // 开启HMR功能 // 修改
阅读全文
摘要：1、基本js兼容性处理 --> @babel/preset-env 只能转换基本语法，promise等高级语法不能转换 官方文档：https://webpack.docschina.org/loaders/babel-loader/ 1）安装 npm install -D babel-loader
阅读全文
摘要：1、安装配置 eslint-webpack-plugin 1）安装 eslint-webpack-plugin：（该插件使用 eslint 来查找和修复 JavaScript 代码中的问题。） npm install eslint-webpack-plugin --save-dev 注意: 如果未安
阅读全文
浙公网安备 33010602011771号