dn-middleware-webpack-hmr

dawn 的webpack中间件。

内建支持：

• Webpack 3.x
• React开发环境

特性

• Create-react-app 式的开发体验 (使用 react-dev-utils )
• 简单配置pipe.yml即可上手开发
• 支持React开发环境下热更新(Hot Module Reload)
• 支持远程热更新（配合charles用于调试日常或预发环境）
• 支持Postcss，其配置可以内建开启或用户自定义
• 支持antd和antd-mobile的按需加载及主题配置
• 开发期间eslint实时报错支持
• react语法错误提示
• 默认支持typescript
• 支持代理（使用server.yml）

开始使用

1. 更新 your .dawn/pipe.yml:

dev:
  - name: webpack-hmr
    <...options>  # 写配置

2. 标识入口组件为可热更新: (详见 react-hot-loader)

// App.js
import React from 'react'
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default hot(module)(App)

3. 更新依赖

$ dn update
$ dn dev

4. 需要远程热更新

适合用charles或其他第三方代理mock静态资源请求，并保持热更新功能

举例：本地启动服务为http://localhost:8080 ，日常环境为http://daily.taobao.net

将http://daily.taobao.net/js/index.js 代理到 http://localhost:8080/index.js，用于在日常环境下做实时调试。

$ dn dev -e maplocal

Typescript支持

默认情况下，中间件会尝试在根目录写入tsconfig.json文件，但如果根目录已存在tsconfig.json, 会以根目录的为准；

如果有ts编译问题，且tsconfig.json是之前自定义的，可尝试先备份该文件后删除该文件，然后执行dn d或其他命令运行中间件，对比中间件写入的tsconfig.json文件看是否有差异。

自定义配置

除了在pipe.yml下可自定义配置外，可通过根目录webpack.config.js来进行深度定制

举例：

// webpack.config.js
module.exports = function(webpackConf){
  let cmd = process.env.DN_CMD;
  webpackConf.resolve = {
    alias:{
      'components':path.resolve(__dirname,'src/components'),      
    }
  };
};

Mock

在server.yml中配置。参考webpack-dev-server的配置。

示例：

proxy:
    rules: 
      ^/api(.*): 'https://www.aliyun.com/'

Options

env

• 环境变量，配置后会使用webpack.definePlugin设置process.env.NODE_ENV.
• dn dev时默认为development, dn build时默认为production
• 如果自建了一个pipe，需要显式声明env。

entry

• webpack entry。支持glob匹配

示例：

 entry: ./src/*.js # 将 src 下所有 .js 文件作为入口（不包括子目录中的 js）

output

• webpack output, 默认为根目录 ./build。

template

• 模板，支持glob匹配

template: ./src/assets/*.html   # 将 assest 下的所有 html 作为页面模板 

port

• 开发端口号，仅当开发时可用。
• 默认值为8001

appSrc

• 项目代码所在目录，默认为根目录src。
• 传参需要string和Array格式。

sourceMap

• 是否开启sourceMap。 env为development时默认开启；为production时默认关闭。

compress

• 是否开启压缩。env为development时默认开启；为production时默认关闭。

babel

• babel自定义配置，需要在用户目录下手动安装。
• 大部分babel配置已经内建。

举例：

pipe.yml:

babel: $require ./babel.json  # 同目录下

babel.json:

{
  "plugins": [
    ["import", { "libraryName": "antd-mobile", "style": "css" }]
  ]
}

inject

• 自定义插入entry的内容

inject:
  - babel-polyfill

cssModules

• 是否开启cssModules, 默认为false

stats

• 是否对编译后资源做分析（使用webpack-visualizer-plugin）, 默认为false

folders

• 自定义build后资源存在的目录。

folders:                       
  js: js
  css: css
  font: font
  img: img

common

• 自定义抽取公共资源部分，默认开启。

common:
  disabled: true      # 禁用
  name: common        # 公共chunk名称

externals

• 声明排除的库文件。默认会排除jquery, zepto, react, react-dom

externals:
  jquery: jQuery

theme

• 主题配置，可适用于antd或antd-mobile。
• 因为主题配置可能较多，推荐新建一个yaml文件单独保存。

举例：

pipe.yml:

    theme: $require ./theme.yml  # 同目录下

theme.yml:

---
brand-primary: '#0070cc'
brand-success: '#35b42b'

isMobile

• 是否开启移动端配置，默认false.
• 开启后会加入postcss-px-to-viewport， postcss-aspect-ratio-mini和postcss-write-svg支持
• 开启后会加入browserslist支持 （'iOS >= 8', 'Android >= 4'）。

pxToViewportOptions

• 开启isMobile后可以进一步配置。
• 参考postcss-px-to-viewport的配置。

cssnano

• 参考cssnano的配置。

lessLoaderOptions

• 参考less-loader的配置。

browserslist

• 自定义浏览器支持范围，格式为数组。
• 定义后会用于babel-preset-env和postcss的autoprefixer。

extraPostCSSPlugins

• 自定义postcss plugin，格式为数组。需要在用户目录下手动安装。

yamlqlOptions

• 自定义yamlql配置，请见yamlql-loader

举例：

    yamlqlOptions: 
      url: '/graphql'