悦涵仙子的技术笔记本

当你运行 vue-cli-service build 时，你可以通过 --target 选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。1.应用2.库Vue vs. JS/TS 入口文件3.Web Components 组件1.应用2.库Vue vs. JS/TS 入口文件3.Web Components 组件...

你可以替换你的项目根目录中的下列文件来指定环境变量：.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略一个环境文件只包含环境变量的“键=值”对：FOO=barVUE_APP_SECRET=secret被载入的变量将会对 vue-cli-s

修改webpack有两种方式1.简单的配置方式警告2.链式操作 (高级)修改 Loader 选项添加一个新的 Loader替换一个规则里的 Loader修改插件选项3.审查项目的 webpack 配置4.以一个文件的方式使用解析好的配置1.简单的配置方式调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：// vue.config.jsmodule.exports = { configureWebpack: {

引用静态资源所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。预处理器你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成

HTMLIndex 文件public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。Preload<link rel=“preload”> 是一种 resource hint，用

一、何为CLICLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。二、何为CLI 服务CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。HMR 不适用于生产环境，这意味着它应当只在开发环境使用。启用 HMR启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。const path = require('path'); const HtmlWebpackPlugin = requ

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。示例例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转

告知 webpack 使用相应模式的内置优化，值有两个：development 或 production 之中的一个在配置中提供 mode 选项：module.exports = { mode: 'production'};或者从 CLI 参数中传递：webpack --mode=production支持以下字符串值：选项描述developmentright-aligned 会将 process.env.NODE_ENV 的值设为 development。启用 N

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。注意，即使可以存在多个入口起点，但只指定一个输出配置。在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：filename 用于输出文件的文件名。目标输出目录 path 的绝对路径。单入口

webpack

五个核心概念：入口(entry)输出(output)loader插件(plugins)模式(mode)一个完整的webpack.config.js 示例：const path = require('path');module.exports = { mode: "production", // "production" | "development" | "none" mode: "production", // enable many optimizations for pr

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src对象语法const config = { entry: { app: './src/app.js', vendor