typescript + vue 多页面应用配置和构建优化
├── public // 静态打包文件
├── scripts // 自动创建脚本
├── src // 源代码
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── config // 配置相关
│ ├── utils // 全局公用方法
│ ├── icons // 全局svg组件
│ │── pages // 业务模块根目录modules
│ │ ├── demo // 页面
│ ├── app.vue // 入口页面
│ └── main.ts // 入口初始化
│ │ └── index // 页面
├── .gitignore // git 忽略项
├── package.json // 安装依赖包
├── vue.config.js // 项目配置
├── README.md // 文档说明- 各环境配置
- 自动脚本新建页面和组件
- 打包构建优化（dllPlugin）
根目录下新建.env.name，例如：
.env.test文件
# just a flag
NODE_ENV = "test"
VUE_APP_TITLE = 'test'
# base url
BASE_URL = "http:https://xxx.com"根据不同环境配置不同接口地址和NODE_ENV，方便后续根据打包环境配置处理
1.1 全局安装webpack、 webpack-cli
webpack -v1.2 生成 dll，在package.json文件新增
"scripts": {
...
"dll": "webpack -p --progress --config ./webpack.dll.conf.js"
}执行生成 dll
yarn run dll1.3 根目录新建webpack.dll.confl.js文件，安装CleanWebpackPlugin插件
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// dll文件存放的目录
const dllPath = 'public/vendor'
module.exports = {
entry: {
// 需要提取的库文件
vendor: [
'vue',
'vue-router',
'vuex',
'axios',
'element-ui'
]
},
output: {
path: path.join(__dirname, dllPath),
filename: '[name].dll.js',
// vendor.dll.js中暴露出的全局变量名，保持与 webpack.DllPlugin 中名称一致
library: '[name]_[hash]'
},
plugins: [
// 清除之前的dll文件
new CleanWebpackPlugin(),
// 设置环境变量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: 'production'
}
}),
new webpack.DllPlugin({
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
// 保持与 output.library 中名称一致
name: '[name]_[hash]',
context: process.cwd()
})
]
}1.4 忽略已编译文件
为减少 webpack 对公共库的编译时间，在vue.config.js添加
const webpack = require('webpack')
module.exports = {
...
configureWebpack: {
plugins: [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require('./public/vendor/vendor-manifest.json')
})
]
}
}1.5 自动引入生成的 dll 文件
安装 add-asset-html-webpack-plugin ，自动引入生成文件
module.exports = {
...
configureWebpack: {
plugins: [
...
// 将 dll 注入到 生成的 html 模板中
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, './public/vendor/*.js'),
// dll 引用路径
publicPath: './vendor',
// dll最终输出的目录
outputPath: './vendor'
})
]
}
}还有 GZip压缩 、 speed-measure-webpack-plugin 具体详细看 vue.config.js