webpack4打包模板

webpack4 多页面打包模板

安装

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