随笔分类 - webpack
摘要：使用 dll，可以指示webpack 哪些库不参与打包，可以对某些第三方库进行单独打包， 需要一个配置文件 webpack.dll.js const {resolve} = require('path') const webpack = require('webpack') module.expor
阅读全文
摘要：当 js 文件 是通过 cdn 加载到页面上的，webpack 打包时，需要忽略这一类库的打包，就需要在 webpack 配置中添加 externals 配置，如当页面上 jQuery 库通过 cdn 方式加载，externals 需要过滤掉 jQuery库的打包， <!DOCTYPE html>
阅读全文
摘要：需要用到 thread-loader , const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') process.env.NODE_ENV = 'production'
阅读全文
摘要：PWA：渐进式网络开发应用程序(离线可访问)，需要通过serviceWorker 实现， 首先，webpack 配置使用 workbox-webpack-plugin 这个插件，生成一个 serviceWorker 配置文件 构建后，生成 serviceWorker 文件： 接着，在入口文件 ind
阅读全文
摘要：1，正常加载可以认为是并行加载，在同一时间加载多个文件 index.js 中 引入 test.js , 点击按钮之前已经加载了 test.js 2，懒加载：当文件需要使用时才加载 构建后： 只加载了 index.js ，点击按钮后才会加载 test.js 3，预加载 prefetch：会在使用之前，
阅读全文
摘要：1，在 webpack 中可以定义多入口，将不同的入口文件打包为不同的 chunk 构建后的 文件中有两个单独的 js 2，webpack 中 optimization 配置 还可以 将node_modules中代码单独打包一个chunk最终输出，如果是多入口，可以 自动分析多入口chunk中，有没
阅读全文
摘要：tree shaking：去除应用程序中没有使用到的无用代码 前提： ① 使用 ES6 模块化 ② 开启 production 环境 作用：减少代码体积 test.js test.js 中定义了 通过 ES6 模块 暴露了 add 和 count 两个方法， index.js 中 引入了 add 和
阅读全文
摘要：1，babel 缓存： babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率（已进行了 bable 兼容性处理的 js 进行缓存，再次构建的时候就不用重新 babale-loader 处理兼容问题） 设置：cacheDirectory：
阅读全文
摘要：多个 loader，但是每个文件只能匹配一个 loader，被一个 loader 处理，因此可以使用 oneOf 唯一匹配，不需要每个文件把所有的 loader 都询问一遍，可以提高 loader 的执行效率 const {resolve} = require('path') const MiniC
阅读全文
摘要：source-map：一种提供源代码 到 构建后 代码映射技术（如果构建后的代码出错了，通过映射可以追踪源代码的错误） 1，source-map ：外部，错误代码准确信息 和 源代码的错误位置 2，inline-source-map：内联，只生成一个内联 source-map，错误代码准确信息 和
阅读全文
摘要：HTR：hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大的提升构建速度 会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面，主要是通过以下方式： ①保留在完全重新加载页面时丢失的应用程
阅读全文
摘要：1 2 3 const {resolve} = require('path') 4 const MiniCssExtractPlugin = require('mini-css-extract-plugin') 5 const OptimizeCssAssetsWebpackPlugin = req
阅读全文
摘要：1，js 压缩： 将 mode 改为“production" 即可，production 模式下，webpack 会自动压缩 js 文件 2，html 压缩： src / index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset
阅读全文
摘要：js 兼容性处理：babel-loader @babel / core npm install --save-dev babel-loader @babel/core index.js 中，使用了箭头函数的语法，打包编译后同样也是箭头函数，这在 chrome中没有任何问题，正常输出7，但在 IE 中
阅读全文
摘要：js 语法检查：eslint-loader eslint 只检查自己写的源代码，第三方的库不用检查 设置检查规则： package.json 中 eslintConfig 设置： browser：true 浏览器全局变量 airhub 代码规范：https://github.com/airbnb/j
阅读全文
摘要：npm install --save-dev optimize-css-assets-webpack-plugin webpack配置： const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webp
阅读全文
摘要：在 这里 display:flex 需要兼容性处理，webpack 编译打包时，需要使用 postcss-loader 这个loader 和 postcss-preset-env 这个插件，它帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼
阅读全文
摘要：webpack编译打包时，css是被放在 js 中的，通过 style 标签加载到页面上，通过将 css 从 js中提取出来，可以使用 link 方式加载 css 用到一个插件 , mini-css-extract-plugin 首先下载这个插件 npm install --save-dev min
阅读全文
摘要：webpack.config.js const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/i
阅读全文
摘要：开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器等） 特点：只会在内存中编译打包，不会有任何输出 指令：npx webpack-dev-server 安装 webpack-dev-server npm install webpack-dev-server -D c
阅读全文
浙公网安备 33010602011771号