webpack4-boilerplate
webpack4 多页面打包模板
- 支持React
- 支持scss, autoprefixer自动加浏览器前缀, icon字体图标
- ES6+语法 babel编译成 ES5语法
- 提取公共css和js，自动添加版本号
- 打包压缩js和css
- Mock数据 接口转发
使用
安装
npm install
开发(默认开启本地mock)
npm run dev
预览: http://localhost:9001/trade-index
关闭mock
npm run dev:no-mock
接口代理(关闭本地mock，开启远程代理，用于后端联调)
npm run proxy
打包
npm run build
自定义打包目录
npm run dev:custom
开发阶段，如果page目录下页面过多，会导致打包缓慢，影响开发效率。可以新建一个customPages.json指定开发阶段需要打包的页面
{
"pages": [
"trade-index",
"trade-success"
]
}说明
pages目录下，每个文件夹为单独的一个页面
每个页面至少有两个文件配置:
app.js: 页面的逻辑入口
index.html: 页面的html打包模板
assets目录下，放静态资源，比如图片资源
styles目录下，放公共全局的css
可以自行添加文件夹，比如全局的components公共组件, utils全局工具方法
mock目录为本地mock数据，文档详见mocker-api
build目录为webpack打包配置，有详细的注解
代码分割使用的是splitChunks配置
optimization: {
splitChunks: {
cacheGroups: {
// 打包业务中公共代码
common: {
name: "common",
chunks: "initial",
minSize: 1,
priority: 0,
minChunks: 3, // 同时引用了3次才打包
},
// 打包node_modules中的文件
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
chunks: "initial",
priority: 10,
minChunks: 2, // 同时引用了2次才打包
}
}
}
}接口代理详见devServerProxy.js
const proxy = {
'/api': {
target: 'https://anata.me', // 后端地址
changeOrigin: true,
secure: false,
},
}其他
- 移动端定制,参考项目分支feature/mobile
- 使用dll加快打包速度,参考项目分支feature/dll
- 使用prerender-spa-plugin预渲染,参考项目分支feature/prerender