Skip to content

deepred5/webpack4-boilerplate

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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,
  },
}

其他