dn-middleware-webpack-hmr

1.1.1 • Public • Published

dn-middleware-webpack-hmr

dawn 的webpack中间件。

内建支持:

  • Webpack 3.x
  • React开发环境

特性

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

开始使用

  1. 更新 your .dawn/pipe.yml:
dev:
  name: webpack-hmr
    <...options>  # 写配置 
  1. 标识入口组件为可热更新: (详见 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)
  1. 更新依赖
$ dn update
$ dn dev
  1. 需要远程热更新

适合用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
  • 传参需要stringArray格式。

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

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

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

举例:

pipe.yml:

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

theme.yml:

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

isMobile

  • 是否开启移动端配置,默认false.
  • 开启后会加入postcss-px-to-viewportpostcss-aspect-ratio-minipostcss-write-svg支持
  • 开启后会加入browserslist支持 ('iOS >= 8', 'Android >= 4')。

pxToViewportOptions

cssnano

lessLoaderOptions

browserslist

  • 自定义浏览器支持范围,格式为数组。
  • 定义后会用于babel-preset-envpostcssautoprefixer

extraPostCSSPlugins

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

yamlqlOptions

举例:

    yamlqlOptions: 
      url: '/graphql'

Dependents (0)

Package Sidebar

Install

npm i dn-middleware-webpack-hmr

Weekly Downloads

4

Version

1.1.1

License

MIT

Unpacked Size

363 kB

Total Files

28

Last publish

Collaborators

  • clancyz