启动开发服务器:
npm run dev
启动开发服务器(输出详情到控制台):
npm run dev:verbose
打包:
npm run build
打包且分析输出:
npm run build:analysis
构建 vendor(只用于开发模式):
npm run build:vendor
在构建模式下由外部指定入口模块:
npm run build -- --env entry=<name of module>
npm run build:analysis -- --env entry=<name of module>
例子, 将 index 作为入口模块:
npm run build -- --env entry=index
通过:
npm run clean
可以清空编译时产生的缓存, 这样做会降低之后的首次编译速度.
- entrys 下的模块只会选择一个进行编译并作为首页模块进行输出, 适用于多个入口模块但是编译时只需要一个的情况.
- modules 下的模块均会参与编译
- pages 下存放的是静态 html 页面不参与编译最终会直接的移动到编译目录中
作为首页模块输出的 entrys 模块, 无论模块目录名称是什么最终的输出结果都是 index.html
.
每一个模块目录内部必须有三个文件:
- index.js 作为 webpack 打包的入口
- index.html 作为注入 chunk 的模板
- index.html head 标签尾需要添加
<%= htmlWebpackPlugin.options.headScripts %>
- index.html head 标签尾需要添加
- fallback.js 本质是 connect-api-fallback 的选项配置, 在开发服务器运行时通过该配置, 决定哪些地址响应
index.html
仅有这三个文件是不能够满足项目的运行, 的一般来说还需要路由文件和 vue 文件, 建议的目录格式如下:
- fallback.js
- index.html
- index.js
- index.vue
- router.js
是否将文件放入到该模块目录的原则是: 只用于该模块的文件, 且需要在入口处引用都可以放到该目录下.
modules 模块会使用模块目录的名称作为最终生成的 html 文件的名称.
而且模块的名称会作为路由匹配的地址, 如果存在 about 模块, 则 url 基于 /about/ 开头的地址都会返回 about.html
文件.
modules 下的所有模块都会参与打包且模块名称作为打包的入口和路由前缀, 除此以外其余规则和 entrys 下的模块一致.
entrys 和 modules 下存放的都是用于 SPA 的入口模块, 对于页面组件(路由组件)需要放到 views
目录中, 虽然可以将这些组件放置到 entrys 和 modules 下.
但是随着项目的开发这么做有两点不推荐:
- 目录层级会越来越多
- 页面组件(路由组件) 可能会在不同的模块间复用, 如果一个模块直接引用另外一个模块的组件则它们总会需要放置到一个公共的位置.
对于具有复用意义的非页面组件(路由组件)可以放置到该目录下.
需要经过 webpack 处理的静态资源文件(即不是 js 文件)需要放到这个位置.
放置到该目录的文件不会经过 webpack 处理, 处于该目录中的文件只能通过绝对地址进行引用:
/static/helloworld/main.css
如果在使用 import 语句进行导入将无法通过编译.
项目根路径支持两个特殊文件:
- local.base.js
- local.config.js
这两个特殊文件会被 git 忽略掉, 但是一旦你提供它, 他的优先级会高于默认的:
- build/base.js
- config.js
添加这两个文件的目的是, 为了避免从服务器拉取代码时候他人修改了这两个文件, 导致本地频繁的改动.
local.base.js
会覆盖默认的 base.js
中的同名配置. 而 local.config.js
将会直接替换 static/js/config.js
.
- 启动 Vue
- 热重载
- vue vuex vue-loader
- 多页面
- 支持主模块
- browserlist
- babel
- 开发时禁用
- postcss
- sass
- mini-css
- babel
- copy statics
- proxyTable
- 将 pages 中的依赖模块也纳入到 webpack 中解析
- 拆分优化
- css 拆分
- 使用 debug
- 入口支持 HTML
- 入口支持过滤器
- loader 限定工作范围
- dllplugin
- 自动化 dllplugin
- 构建时自动移除 htmlwebpackplugin 所注入的内容
- 移除 copyplugin 和 cleanplugin
- definePlugin 支持
- cache
- GZIP
- thread-loader
- 区分 entry 和 modules
- 使用 sideEffects 和 treeShake
- 使用 async 和 defer
- 使用 preload 和 prefetch
- 使用 serviceWork
- 基于 HTTP2
- 基于模块的重载
- 编译缓存
intuitive
Hot Module Replacement
监听到编译, 确定是哪个模块->只编译该模块(debound)
import.meta.url