方案说明

  • Webpack4

插件版本

  • easywebpack: ^4.x.x 或 @easy-team/easywebpack: ^4.0.0

  • easywebpack-cli: ^4.x.x 或 @easy-team/easywebpack-cli: ^4.0.0

  • easywebpack-vue: ^4.x.x 或 @easy-team/easywebpack-cli: ^4.0.0

  • easywebpack-react: ^4.x.x 或 @easy-team/easywebpack-cli: ^4.0.0

  • easywebpack-html: ^4.x.x

  • easywebpack-js: ^4.x.x

  • egg-webpack: ^4.x.x

  • webpack-tool: ^4.x.x

发布历史


https://github.com/hubcarl/easywebpack/blob/master/CHANGELOG.md

版本特性

2020-05

Feature

easywebpack-cli 新增初始化模板

  • 创建 React Component NPM 骨架
  • 创建 React 独立公共包构建骨架
  • 创建 Vue 独立公共包构建骨架
  • 创建 TypeScript Lib 构建骨架

2019-11

Feature

easywebpack@4.12.0 / @easy-team/easywebpack@4.2.0

  • 集成 vconsole-webpack-plugin 插件,默认禁用,通过 plugins: [ { vconsole: true }] 开启.

Document

2019-10

Feature


  • 支持本地文件服务用于数据 mock 服务。 例如 easy server -d mock mock 为目录, 默认为 http://localhost:8888。 可以配合 devServer 的 proxy 使用的 pathRewrite 功能为项目提供数据服务。


image.png


http://localhost:8888/api/v1/news/list
或
http://localhost:8888/api/v1/news/list

http://localhost:8888/api/v1/user/info
或
http://localhost:8888/api/v1/user/info.json

module.exports = {
  entry: {
    index: './src/app.js'
  },
  devServer: {
    proxy: {
      '/api/test': {
        target: 'http://localhost:8888',
        pathRewrite: {'/api/test' : '/api'}
      }
    }
  }
};

  • 提供 easy-team 插件模式快速升级 Babel 方案(Babel6 -> Babel7), 后续所有骨架将改成此方案。


为了更方便升级 Babel7, 同时尽量减少配置且无需安装 @babel 依赖,@easy-team 模式直接内置Babel 7 的相关依赖,只需要把 easywebpack 依赖模式改成 @easy-team/easywebpack 模式,如果代码中直接依赖了也请一并修改。更多详细信息见:https://www.yuque.com/easy-team/easywebpack/babel7

  • @easy-team/easywebpack-cli: ^4.0.0 替换 easywebpack-cli
  • @easy-team/easywebpack-react: ^4.0.0 替换 easywebpack-react
  • @easy-team/easywebpack-vue: ^4.0.0 替换 easywebpack-vue
  • easy-team 模式使用 babel.config.js 替换 .babelrc 配置
  • easy-team 模式支持 Babel 7 同构应用根据不同平台编译成不同 ECMAScript 版本规范
module.exports = {
  "env": {
    "node": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": false,
            "targets": {
              "node": "current"
            }
          }
        ]
      ],
      "plugins": [    
        "@babel/plugin-syntax-dynamic-import"
      ]
    },
    "web": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": false,
            "targets": {
              "browsers": [
                "last 2 versions",
                "safari >= 8"
              ]
            }
          }
        ]
      ],
      "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-transform-object-assign"
      ]
    }
  }
}

2019-09

Feature

  • easywebpack-cli 支持 easy server 命令启动 HTTP Static Server 展示文件目录导航


image.png

2019-07

Feature

2019-03

Feature

2018-11

Feature







//${root}/webpack.config.js
module.exports = {
  ...
  customize(webpackConfig){ // 此外 webpackConfig 为原生生成的 webpack config
   return webpackConfig;
  }
}
  • easywepback ^4.9.0 默认开启 babel 和 ts 的 thread-loadercache-loader , 加快构建速度;如果出现问题,请通过如下方式开启和禁用
//${root}/webpack.config.js
module.exports = {
 compile: {
   thread:false,
   cache:false
 }
}
  • easywepback ^4.9.0 开始默认禁用 eslint-loader , 加快构建速度, 可以通过如下方式开启和禁用
//${root}/webpack.config.js
module.exports = {
 loaders;{
   eslint: true
 }
}
  • easywebpack-react ^4.4.0 支持 AntD Theme 主题配置


https://github.com/easy-team/egg-react-webpack-boilerplate/issues/11
https://github.com/easy-team/egg-react-webpack-boilerplate/tree/antd-theme

  • easywebpack-cli ^4.3.0 支持扩展新的 cli (例如:ves-cli)

2018-10

  • *配置增加 支持 plugins:[] 和 {} 混合模式配置 *(easywebpack@4.8.5)

  • *配置增强 集成 copy-webpack-plugin 插件, 通过 plugins.copy 配置 *(easywebpack@4.8.5)

  • 配置简化 egg 项目 egg 无需配置,解决方案支持自动检测功能(easywebpack@4.8.0)

  • 配置简化 egg 项目 framework 无需配置,解决方案支持自动检测功能(easywebpack@4.8.0)

  • 配置简化 entry 提供默认值配置, 为 { index: src/app.js }easywebpack@4.8.0)

  • 配置增强 entry 支持 node-glob 模式配置easywebpack@4.8.0)

  • 配置简化 entry 支持 template loader 配置easywebpack@4.8.0)

  • 配置简化 webpack.config.js devtool 配置只在本地 dev 模式有效, 默认为 eval。可以通过 easy build --devtool 强制指定 devtool (easywebpack-cli@4.0.0)

  • 配置简化 postcss.conf.js 提供默认配置 (easywebpack@4.8.0)

  • 配置简化 easy build 默认 prod 发布模式(easywebpack-cli@4.0.0)

  • *配置简化 *babel 相关的 devDependencies 依赖 解决方案已内置,无需项目显示配置依赖 (easywebpack@4.8.0)

  • 开发增强 **自动解决本地开发时端口占用问题,支持多项目自动获取新的端口号 **(easywebpack-cli@4.0.0easywebpack@4.8.0

easy build
easy server

easy build --server

easy build --webpack
easy build --speed


https://www.yuque.com/easy-team/easywebpack/cssmodule


https://www.yuque.com/easy-team/ves/babel

  • 配置简化 easywebpack3 默认开启 sass-loader, easywebpack4 默认禁用 sass-loader, 如果要开启:
loaders:{
  sass: true
}
  • 配置简化 webpack.config.js easywebpack4 plugins 节点配置简化, 无需 args 节点


https://www.yuque.com/easy-team/easywebpack/plugin




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
React 工程方案 React 工程方案
安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置,以下仅仅是举例. 详细配置见:...
2020-05-31 sky
Next 
Vue 工程方案 Vue 工程方案
安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置,以下仅仅是举例. 详细配置见:...
2020-05-31 sky