zz-webpack-react
webpack打包工具React版
Last updated 2 years ago by yuanxiaolong .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install zz-webpack-react 
SYNC missed versions from official npm registry.

zz-webpack-react version

react版webpack打包工具,主要提供公共webpack配置,快速接入最新最优webpack配置

前言

  • 目录结构及webpack配置修改遵循vue-cli生成模版的用法
  • 兼容 ejs 模版语法
  • 兼容单页面及多页面应用,简单的目录结构如下:
// 多页面应用
my-project
  |__ src
  |    |__ pages // 存放页面入口,用于多页面应用中
  |    |     |__ detail.jsx // 例如,详情页
  |    |     |__ order.jsx  // 例如,订单页
  |    |__ app.jsx // 入口文件
  |__ template  // 存放模版文件
  |    |__ common // 公共模版
  |    |__ detail.ejs  //详情页模版文件
  |    |__ order.ejs  //订单页模版文件

// 单页面应用
my-project
  |__ src
  |    |__ app.jsx // 入口文件
  |__ template  // 存放模版文件
  |    |__ common // 公共模版
  |    |__ index.ejs  // 项目模版

使用步骤

安装

$ npm i -D zz-webpack-react
# 或
$ yarn add zz-webpack-react

初始化-已有项目

在当前目录中生成配置文件

$ node_modules/zz-webpack-react/bin/start

执行命令

# dev命令,依赖全局的 webpack及webpack-dev-server工具
$ webpack-dev-server --inline --progress --disable-host-check --public --config webpack-react/build/dev.js

# build命令, 如果需要设置环境变量为:NODE_ENV=production,推荐使用cross-env,可以兼容mac和windows
$ cross-env NODE_ENV=production node webpack-react/build/build.js

初始化-新项目

在当前目录中生成新项目模版

$ node_modules/zz-webpack-react/bin/init

执行命令

# 进入新项目
$ cd webpack-react-demo
# 安装依赖
$ npm install
# 开发
$ npm run dev
# 打包
$ npm run build

webpack动态修改

主要是执行webpack功能及动态修改webpack配置

开发配置文件

例如,config/index.js

let path = require('path')
module.exports = {
   // 基础配置
    base:{
      // 入口文件配置
      entry:{
        vendor:['react', 'react-dom'],
        app: path.join(process.cwd(), 'src/app')
      },
      externals: {}, // 排除部分第三方组件不打包
      cssModule: false, // css module自动关闭,部分组件库使用此功能会加载不了样式,例如antd
      cssExtract: false, // 提取css为单独的css文件,或者跟随chunk代码自动嵌入 <head>中,默认false,跟随chunk
      alias: {} // 设置别名
    },
    // 开发模式配置
    dev:{
      https: false, // https功能,默认关闭, true/false
      host: 'localhost', // 本地启动地址
      port: 8080, // 启动端口号
      assetsPublicPath: '', // 访问虚拟路径,例如 http://localhost/Mzhuanzhuan/my-project/index.html
      proxyTable: {}, // 代理
      autoOpenBrowser: true, // 启动时自动打开浏览器,默认开启,true/false
      useEslint: true , // 开启eslint验证,配置模版时选择开启或关闭,true/false
      vconsole: false, // 开启调试模式,默认关闭,true/false
      merge: {} //定义的webpack配置
    },
    // 构建模式配置
    build:{
      web: "webserver", // 存放所有的html文件
      assetsPublicPath: 'https://img.static.com.cn/', // 静态资源路径
      bundleAnalyzerReport: false, // 开启代码分析报告功能,true/false,也可使用命令 npm run build --report
      cssSourceMap: false, // 控制css的sourcemap
      jsSourceMap: true, // 控制js的sourcemap
      assetsRoot: path.resolve(process.cwd(), 'dist'), // 打包生成的文件存放目录
      inline:['app.css', 'manifest.js'], // 自定义内联静态资源
      performance: true, // 性能限制,首次加载js+css不能超过400k, 单个文件大小不超过: 300k
      merge: {} //定义的webpack配置
    }
}

开放接口

参数 类型 备注
baseWebpackConfig object 公共webpack配置,可修改
devWebpackConfig object 开发环境webpack配置,可修改
prodWebpackConfig object 生产环境webpack配置,可修改
dev function 开发环境使用
build function 生产环境使用
  • 本项目下虽然所有的webpack都可以替换成以前各个项目自己的配置文件,但为了统一性,不建议完全替换配置文件,应该遵循本插件配置文件规则

引入webpack插件

  • 方法一

路径:build/index.js

// 引入 webpack 打包工具
let webpackVue = require('zz-webpack-react')
// webpack公共配置
let config = require('../config/index.js')
module.exports = webpackVue(config).then(res => {
  // 动态修改基础配置
  // 可重写公共webpack配置文件, 例如
  res.baseWebpackConfig.entry = {
    // 自定义重写
    vendor:['react', 'react-dom'],
    app:'./src/app.js'
  }
  // 也可使用 webpack-merge 进行配置合并
  return res
})
  • 方法二

直接修改config/index.js配置

例如:

  module.exports = {
    base: {
      ...
      merge: {
        entry: {
          vendor:['react', 'react-dom'],
          app:'./src/app.js'
        }
      }
    }
    dev:{
      ...
      merge: {
        plugins: [
          new youplugins()
        ]
      }
    },
    build: {
      ...
      merge: {
        plugins: [
          new youplugins()
        ]
      }
    },
  }

dev模式

路径:build/dev.js

执行命令:(命令需要自行配置)

$ npm run dev

代码:

// 执行 npm run dev
let webpack = require('./index')
module.exports = webpack.then(res => {
  // 自定义build配置
    let dev = {
      plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
      ]
    }
    // 与默认配置合并
    res.devWebpackConfig = merge(res.prodWebpackConfig, dev)
    // 可动态修改开发环境webpack配置,例如
    res.devWebpackConfig.devtool = false
    // 也可使用 webpack-merge 进行配置合并
    return res.dev()
})

同样自定义添加配置也可以使用引入插件的方法二

build模式

路径:build/build.js

执行命令:(命令需要自行配置)

# 构建项目
$ npm run build

代码:

// 执行 npm run build
let merge = require('webpack-merge')
let webpack = require('./index')
module.exports = webpack.then(res => {
  // 自定义build配置
  let build = {
    plugins: [
      new webpack.optimize.ModuleConcatenationPlugin()
    ]
  }
  // 与默认配置合并
  res.prodWebpackConfig = merge(res.prodWebpackConfig, build)
  return res.build()
})

同样自定义添加配置也可以使用引入插件的方法二

test

自定义test或者其他命令

  • package.json 中新增命令

    "scripts": {
      "test": "cross-env NODE_ENV=production node build/test.js"
    },
    
  • build 文件夹中新建 test.js 文件,内容与 build.js 保持一致,例如

    let merge = require('webpack-merge')
    let webpack = require('./index')
    let offlineCfg = require('../config/offline.js')
    let webpackOffline = require('@zz/webpack-offline')(offlineCfg)
    
    module.exports = webpack.then(res => {
      webpackOffline.then(offCfg => {
        res.prodWebpackConfig = merge(res.prodWebpackConfig, offCfg, {
          // 测试相关webpack配置
          plugins:[
    
          ]
        })
        return true
      }).then(d => {
        res.build()
      })
    })
    

Current Tags

  • 1.1.7                                ...           latest (2 years ago)

17 Versions

  • 1.1.7                                ...           2 years ago
  • 1.1.6                                ...           2 years ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.11                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 18
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |