基于 easywebpack 工程体系,你能非常简单,快速的编写出 webpack 复杂的配置,你无需过多关心热更新,是否压缩,是否Hash,公共JS/CSS,DLL,构建速度等问题,这些 easywebpack 都已经帮你解决和优化了。
easywebpack 提供 Vue/React/JS/HTML 等多种前端框架的 Webpack 构建解决方案,同时结合 easywebpack-cli 工具能够快速的进行项目开发。

Webpack 集成配置编写

根据 easywebpack 拿到基础配置后,你可以根据自己的需要进行修改和增强。

基于 easywebpack 编写配置

const easy = require('easywebpack');
module.exports = easy.getWebpackConfig({
  env: process.env.BUILD_ENV,  // 支持dev, test, prod 模式
  target: 'web',
  entry: {
    app: 'src/lib.js'
  }
});

打印出来效果

env 环境说明

默认支持 dev, test, prod 模式,你可以根据自己场景定制

开发环境(easy build dev)

  • 开启 devtool 和 source-map
  • 开启 HMR 热更新, 内存编译,构建文件不落地磁盘
  • js, css, image 不压缩
  • js, css, image 不 Hash

测试环境(easy build test)

  • 禁用 devtool 和 source-map
  • 禁用 HMR 热更新, 构建文件落地磁盘
  • js, css, image 禁用压缩
  • js, css, image 开启 Hash
  • css 分离出独立的 css 文件

正式环境(easy build prod)

  • 禁用 devtool 和 source-map
  • 禁用 HMR 热更新, 构建文件落地磁盘
  • js, css, image 开启压缩
  • js, css, image 开启 Hash
  • css 分离出独立的 css 文件

解决方案

获取 Vue 项目配置

默认 Node 和 Web 构建的 Webpack 配置,总共两个配置, 通过 target: web 获取前端配置

const easy = require('easywebpack-vue');
const webpackConfig = easy.getWebpackConfig({
  env: process.env.BUILD_ENV,  // 支持dev, test, prod 模式
  target: 'web',
  entry: {
    app: 'src/lib.js'
  }
});

获取 React 项目配置

默认 Node 和 Web 构建的 Webpack 配置,总共两个配置, 通过 target: web 获取前端配置

const easy = require('easywebpack-react');
const webpackConfig = easy.getWebpackConfig({
  env: process.env.BUILD_ENV,  // 支持dev, test, prod 模式
  target: 'web',
  entry: {
    app: 'src/lib.js'
  }
});

获取 HTML 项目配置

const easy = require('easywebpack-html');
const webpackConfig = easy.getWebpackConfig({
  env: process.env.BUILD_ENV,  // 支持dev, test, prod 模式
  template: 'src/template.html'
  entry: {
    app: 'src/lib.js'
  }
});

获取 JS 打包配置

const easy = require('easywebpack-js');
const webpackConfig = easy.getWebpackConfig({
  env: process.env.BUILD_ENV,  // 支持dev, test, prod 模式
  entry: {
    app: 'src/lib.js'
  }
});

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
Egg 项目集成 Webpack 热更新 Egg 项目集成 Webpack 热更新
在 Egg + React 工程化解决方案 和 Egg + Vue 工程化解决方案 方案使用了 egg-webpack 实现了 Egg + easywebpack 热更新统一处理。其实 egg-webpack 是可以单独使用的,不耦合 easywebpack 构建配置。下面以 Egg + Re...
2019-12-23 sky
Next 
Flutter 动态更新 Flutter 动态更新
关于动态更新Google 考虑自家 Android 应用安全和苹果策略, 本来在 2019 的 roadmap 里面有这样一项,roadmap公布后,过一段时间后面又移除了这一项,目前不是主航道。 Android 目前可以通过整包方式实现动态更新, iOS 目前还不支持。Android Flu...
2019-12-23 sky