09 2022 档案
摘要：C++ opencv环境下，使用 imread 读取文件报错0x00007FFC795D4FD9 处(位于 Project1.exe 中)有未经处理的异常: Microsoft C 在读取路径没错的前提下（注意使用 双反斜杠） 解决方案: 依次打开 项目>属性>连接器>输入>附加依赖项目 修改前有两
阅读全文
摘要：因为项目路径中有特殊符号 (& 这种会被当做特殊符号)，导致找不到 vue-cli-service.js 文件。所以报错。
阅读全文
摘要：optimization来对打包结果进行优化（生产环境优化）。 文档: https://webpack.docschina.org/configuration/optimization/ 1.文件结构 2.代码 a.js export function add(x, y) { return x +
阅读全文
摘要：webpack开发服务器可用于快速开发应用程序。 1.文件结构 2.代码 index.css html, body { height: 100%; background-color: pink; } index.js import '$css/index'; webpack.config.js co
阅读全文
摘要：1.文件结构 2.代码 index.css html, body { height: 100%; background-color: pink; } index.js html, body { height: 100%; background-color: pink; } webpack.vconf
阅读全文
摘要：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。 loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 本质上，webpack
阅读全文
摘要：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中. 文档: https://www.webpackjs.com/concepts/output/ 1.文件结构
阅读全文
摘要：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 文档: https://www.webpackjs.com/concepts/entry-points/ 1.
阅读全文
摘要：随着项目越来越大，项目里的依赖包也越来越多，所以打包和项目启动速度会变慢。 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包 从而每次只需要打包真正的项目代码，提升了打包速度。 当你运行 webpack 时，默认查找 webpack.config.js 配置文
阅读全文
摘要：externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 这里是排除 jQuery的打包。 1.
阅读全文
摘要：thread-loader: 把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行 开启多进程打包。 进程启动大概为600ms，进程通信也有开销。 只有工作消耗时间比较长，才需要多进
阅读全文
摘要：PWA: 渐进式网络开发应用程序(离线可访问) workbox --> workbox-webpack-plugin 1.文件结构 2.代码 index.css html,body{ margin: 0; padding: 0; height: 100%; background-color: sky
阅读全文
摘要：//懒加载: 当文件需要时才加载~//预加载: prefetch: 会在使用之前，提前加载js文件 (webpackPrefetch: true) //正常加载可以认为是并行加载(同一时间加载多个文件)。// 预加载: prefetch: 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(但是兼容
阅读全文
摘要：1.文件结构 2.代码 index.js function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } /* * 通过js代码，让某个文件被单独打包成一个chunk * import 动态导入语法: 能将某个文件单独打包 * */ /
阅读全文
摘要：1.文件结构 2.代码 import $ from 'jquery' function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3
阅读全文
摘要：1.文件结构 2.代码 index.js import { mul } from './test'; function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console
阅读全文
摘要：tree shaking：去除无用代码 前提：1. 必须使用ES6模块化 2. 开启 production 环境 作用: 减少代码体积 在package.json中配置 "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking） 问题：可能会把css / @
阅读全文
摘要：缓存： babel缓存 cacheDirectory: true --> 让第二次打包构建速度更快 文件资源缓存 hash: 每次wepack构建时会生成一个唯一的hash值。 问题: 因为js和css同时使用一个hash值。 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件） chunk
阅读全文
摘要：oneOf的作用 提升构建速度，避免每个文件都被所有loader过一遍， 因为任何一个文件，构建过程中，在遇到第一个与之对应的loader后，不会再往下进行。在webpack.config.js 中配置 oneOf 1.文件结构 2.代码 webpack.config.js const {resol
阅读全文
摘要：source-map 一种 提供 源代码 到 构建后代码映射 技术 (如果构建代码出错了，通过映射可以追踪源代码错误) 在 webpack.config.js 中配置 devtool 指定 source-map 1.文件结构 2.代码 webpack.config.js const {resolve
阅读全文
摘要：HMR: hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 1.文件结构 2.代码 iconfont.css @font-face {font-family: "iconfont"; sr
阅读全文
摘要：# webpack性能优化* 开发环境性能优化* 生产环境性能优化## 开发环境性能优化* 优化打包构建速度 * HMR* 优化代码调试 * source-map## 生产环境性能优化* 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * externals * dll* 优化
阅读全文
摘要：这里综上所述，多种文件处理打包 1.文件结构 2.代码 a.css #box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; } b.css #bo
阅读全文
摘要：这里使用 html-webpack-plugin 插件压缩 html 文件。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </
阅读全文
摘要：压缩 JS 文件: 这里把 mode 设置为 生产模式，就会自动压缩 JS 代码。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title>
阅读全文
摘要：这里使用 babel 处理 js 兼容性问题 1.文件结构 2.安装 babel core-js $ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D
阅读全文
摘要：使用 eslint 对 js 进行语法检查 1.文件结构 2.安装 eslint 相关插件 $ npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D
阅读全文
摘要：使用 optimize-css-assets-webpack-plugin 插件压缩 CSS文件。 1.文件结构 2.安装 optimize-css-assets-webpack-plugin (根据自己环境安装合适的版本) $ npm i postcss-loader@3.0.0 postcss-
阅读全文
摘要：不同型号、版本的浏览器对CSS的支持程度不同，使用 postcss 插件对不同的浏览器做兼容。 1.文件结构 2.安装 postcss $ npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D 3. a.css #box1 { width: 1
阅读全文
摘要：打包时，使用 MiniCssExtractPlugin 插件，把提取 CSS 成单独文件。 1.文件结构： 2.安装 MiniCssExtractPlugin (根据自己的环境，安装合适的版本，这里用的是wenpack 4.x) $ npm i mini-css-extract-plugin@0.9
阅读全文
摘要：1.文件结构 2. iconfont.css @font-face {font-family: "iconfont"; src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */ src: url('../media/iconfont.e
阅读全文
摘要：配置devServer只需要在 webpack.config.js 中添加如下配置即可： // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~） // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为：npx webpack-d
阅读全文
