共计 2617 个字符，预计需要花费 7 分钟才能阅读完成。
前言
之前写过一次关于 webpack 配置多页面应用, 写的不是很好, 这次项目要用到多页面应用, 于是重新基于 webpack4 构建了一套关于 vue 的多页面应用。我在网上搜索了一圈，发现 vue 多页面配置，大部分都是基于 vue-cli 配置的，很少是从基础开始配置，如是我通过 webpack4, 构建了一个提供多页面入口，打包，调试的轻量级的构建工具，不依赖过多配置，只加载常用的配置，用更少的代码，做更多的东西
项目结构
├── build // webpack 配置目录
│ ├── webpack.config.base.js // 公共配置
│ ├── webpak.config.dev.js // 开发模式
│ ├── webpak.config.prod.js // 打包模式
├── dist // 项目打包路径 (自动生成)
├── page // 多页面入口 (自定义)
├── public // index.html 模板
├── src // 源码目录 (自定义)
├── postcss.config // 样式添加前缀
├── pages.js // 多页面配置项
项目运行
克隆项目
git clone git@github.com:hangjob/vue-multiple-webpack4-template.git
安装依赖
npm install 或 yarn
开发模式
npm run dev
里面已经写好了两个入口文件，启动后可直接访问
http://localhost:3000/home.html
http://localhost:3000/login.html
打包模式
npm run build
打包后生成文件 dist 目录
文件解释
关于 build 中使用的插件项在文件配置后面注释写的都很清楚
多页面配置项 (pages.js)
pages: [
{
page: ‘home’,
entry: path.resolve(__dirname, ‘./page/home.js’), // 指向入口文件
title: ‘ 这是页面 1 ’,
template: path.resolve(__dirname, ‘./public/index.html’), // 指向模板文件
filename: ‘home.html’,
chunks: [‘home’,’common’], // 引入公共模块 common
},
{
page: ‘login’,
entry: path.resolve(__dirname, ‘./page/login.js’), // 指向入口文件
title: ‘ 这是页面 2 ’,
template: path.resolve(__dirname, ‘./public/index.html’), // 指向模板文件
filename: ‘login.html’,
chunks: [‘login’],
}
]
webpack.config.dev.js 开发模式
mode: ‘development’,
devtool: ‘cheap-module-eval-source-map’,// 原始代码（只有行内）, 但是更高的质量和更低的性能
watch: true,
watchOptions: {
poll: 1000, // 每秒监控讯问次数
aggregateTimeout: 500, // 防抖
ignored: ‘/node_modules/’ // 忽略监控文件
},
devServer:{
port: 3000,
hot: true,
progress: false, // 记录条
contentBase: path.resolve(__dirname, ‘../public’), // 表示的是告诉服务器从哪里提供内容
compress: true // 开启 gzip 压缩
}
webpack.config.prod.js 生产模式
ode: ‘production’,
devtool: ‘cheap-module-source-map’,// 原始代码（只有行内）每行代码从 loader 中进行映射
plugins: [
new CleanWebpackPlugin([‘dist’], {
root: path.resolve(__dirname, ‘..’),
dry: false // 启用删除文件
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true, // 启用缓存并且启用多进程并行运行
sourceMap: true // 错误消息位置映射 (减慢编译速度), 线上错误方便查看
}),
new OptimizeCSSAssetsPlugin({})
]
}
webpack.config.base.js 公共模块
optimization: {
splitChunks: {
cacheGroups: {
// 将 `node_modules` 目录下被打包的代码到 `common/common.js`
common: {
test: /node_modules/,
chunks: “initial”, // 只对入口文件处理
name: “common”, // 配置公共模块名称
minChunks: 2, // 表示被引用次数，默认为 1, 比如在项目中有 2 处引用到一样的模块就会抽离到公共模块下
maxInitialRequests: 5, // 最大的初始化加载次数，默认为 1
minSize: 0 // 表示在压缩前的最小模块大小，默认为 0
}
}
}
}
网络下载太慢, 请使用淘宝镜像
1. 临时使用
npm –registry https://registry.npm.taobao.org install express
2. 持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry 或者 npm info express
3. 通过 cnpm 使用
npm install -g cnpm –registry=https://registry.npm.taobao.org
说明
github 地址，后面会持续更新，如果对您有帮助，您可以点右上角 “Star” 支持一下 谢谢！^_^ 如要在编译过程中遇到错误，点击联系作者
感谢这些文章提供帮助
项目有使用到这些文章的我都注释过 webpack 中的 path、publicPath 和 contentBasemini-css-extract-pluginwebpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记 Vue Loader
