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'

    Keywords

    none

    Install

    npm i dn-middleware-webpack-hmr

    DownloadsWeekly Downloads

    21

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    363 kB

    Total Files

    28

    Last publish

    Collaborators

    • clancyz