webpack.config.js

// ${app_root}/webpack.config.js
module.exports = {
  // framework 支持 `js`,`html`, `vue`, `react`, `weex`
  framework: 'html' 
  entry:{ 
    index: 'src/app.js'
  },
  template: 'src/view/layout.html' 
  loaders:{
    // 默认可以不用配置, 添加或扩展请见配置loaders章节  
  },
  pugins:{
    // 默认可以不用配置, 添加或扩展请见配置loaders章节  
  },
  customize(webpackConfig){ // 非必须
    // 此处 webpackConfig 为原生的 webpackconfig, 你可以进行加工处理
    return webpackConfig;
  }
  done(){
    // Webpack 编译完成回调, 默认可以不用配置,当你需要编译完成做某某事情(比如上传cdn)才需要配置
  }
}

这样一份简单的配置具备以下能力

  • 支持 easy start 方式启动 Webpack dev server

  • 支持 easy build dev/test/prod 三种环境构建

  • 支持纯静态 HTML Webpack构建

  • 支持 es6, babel, sass, postcss, eslint 能力

  • 支持开发期热更新能力,同时 Webpack 构建文件不落地磁盘

  • 支持编译结果UI展示和访问

  • 支持图片压缩, js压缩, css压缩, extract能力

  • 通过 easy build 即可构建发布模式

配置编写

目前这里我们仅仅讲解通过 easywebpack-cli 的配置编写和构建, 直接基于 easywebpakc-vue, easywebpakc-react, easywebpakc-html ,easywebpakc-weex解决方案的配置请见解决方案对应章节介绍.

要使用 easywebpack-cli 进行项目构建和开发, 只需要简单的四步

npm install -g easywebpack-cli
  • 编写一份 easywebpack-cli 配置文件 webpack.config.js 放到要构建项目根目录

开始之前, 我们首先来看看一份最简单的基于easywebpack构建的 webpack.config.js 配置

// ${app_root}/webpack.config.js
module.exports = {
  framework: 'html'
  entry: {
    index: 'src/app.js'
  }
  template: 'src/view/layout.html'  
}
  • 添加 ${app_root}/.babelrc 文件
{
  "presets": [["env",{ "modules": false }]],
  "plugins": [
    "transform-object-rest-spread",
    "syntax-dynamic-import",
    "transform-object-assign"
  ],
  "comments": false
}
  • 添加 ${app_root}/postcss.config.js 文件. easywebapck 4.8.0 已内置如下默认配置,无需配置
'use strict';
module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: ['iOS >= 7', 'Android >= 4.0'] })
  ]
};

编译运行

  • 开发
easy dev
  • 编译
easy build

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
公共提取 公共提取
Webpack CommonsChunk 公共代码提取easywebpack 4.10.0 开始,底层通过 optimization 实现公共提取,支持公共 js 和 css 提取, 提取的公共 chunk 文件名默认为 common . 默认是提取的是 node_modules 下依赖...
2020-04-18 sky
Next 
Css Style Css Style
开启 Sass (默认禁用) webpack.config.js // ${app_root}/webpack.config.js module.exports = { module:{ rules:[ {
2020-04-18 sky