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