zoro-tool
webpack toolkit
Last updated a year ago by bigbo .
ISC · Original npm · Tarball · package.json
$ cnpm install zoro-tool 
SYNC missed versions from official npm registry.

基于webpack的cli工具

希望使用的人可以不再需要关注webpack太多的内容,通过对webpack进行了一层包装并暴露一份json的配置提供给使用者配置。

安装

npm install zoro-tool -D
// or
yarn add zoro-tool -D

命令

  • 在开发环境下运行
zorotool server
  • 编译
zorotool build
zorotool build --analyze // 会分析打包后的包

用户可以自定义的配置

在项目根目录想新建webpack.config.js,请务必新建一个,如果使用脚手架生成的,默认已经存在该文件了。

以下是提供给用户可配置的选项

// env下的配置会和其他配置合并,对应不同环境下的最终配置
module.exports = {
    env: {
        development: {
            extraBabelOptions: {
                plugins: ['dva-hmr']
            }
        },
        production: {
            extraBabelOptions: {}
        }
    },
    // port: 4000,
    // extraEntrys: {},
    // extraHtmls: [],
    // extraRules: [],
    // disableCSSModules: false,
    // cssModulesExclude: [],
    // publicPath: '/',
    // outputPath: '/',
    // extraBabelOptions: {},
    // extraResolveExtensions: [],
    // hash: true,
    // devtool: '#cheap-module-eval-source-map',
    // autoprefixer: {},
    // proxy: {},
    // externals: {},
    // library: '',
    // libraryTarget: 'var',
    // define: {},
    // sassOption: {},
    // theme: '',
    // MPA: true,
    // extraProvidePlugin: {},
    // alias: {},
};
  • port
    指定dev下的端口,默认为4000
port: 4000
  • extraEntrys
    在多入口的应用中,默认入口是src/pages下的所有文件夹,但是如果有额外的入口配置,则可以配置该选项。
extraEntrys: {
    'xxx': './xxx/xxx'
},
  • extraHtmls
    搭配extraEntrys使用,例如在线表单
extraHtmls: [
    {
        filename: 'xxx.html',
        title: 'xxx',
        inject: true,
        template: './xxx/xxx/index.html',
        chunks: ['xxx']
    },
],
  • extraRules
    默认情况下不需要配置该选项,但是还是会存在特殊情况
extraRules: [],
  • disableCSSModules
    默认开启css_modules,如果不需要可以设置为false
disableCSSModules: true
  • cssModulesExclude
    可以特别的指定某个文件夹或者文件不需要css_modules
cssModulesExclude: ['./src/components/ui']
  • publicPath
    同webpack的publicPath
publicPath: ''
  • outputPath
    同webpack的outputPath
outputPath: ''
  • extraBabelOptions
    额外的babel选项
extraBabelOptions: {
  presets: [],
  plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]]
}
  • hash
    打包的文件名是否带hash,默认为true
hash: true
  • devtool
    同webpack的devtool,dev环境下默认为#cheap-module-eval-source-map,prod下为false
devtool: '#cheap-module-eval-source-map'
  • autoprefixer
    postcss的插件autoprefixer配置,默认值如下:
autoprefixer: {
  browsers: [
      '>1%',
      'last 4 versions',
      'Firefox ESR',
      'not ie < 9' // React doesn't support IE8 anyway
  ]
}
  • proxy
    webpack-dev-server的proxy设置
proxy: {
  '/remote': {
      target: 'http://localhost:8011/',
      secure: false,
      changeOrigin: true
  },
}
  • externals
    同webpack的externals

  • library
    同webpack的library

  • libraryTarget
    同webpack的libraryTarget

  • define
    webpack中的webpack.DefinePlugin配置项,以下是最终的配置项

new webpack.DefinePlugin({
  'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV)
  },
  {...define}
})
  • sassOption
    sass-loader的配置

  • theme
    less-loader的theme配置的文件路径,如你在src下新建一个了theme.js文件,则

theme: './src/theme.js'
// theme.js
module.exports = {
    primary: 'red'
};

// your-style.less
.container {
    background-color: @primary;
}
  • MPA
    是否是一个多入口项目,默认为true

  • extraProvidePlugin
    同webpack中的new webpack.ProvidePlugin配置

extraProvidePlugin: {
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery'
},
  • alias
    同webpack的alias配置

Current Tags

  • 0.1.1                                ...           latest (a year ago)

2 Versions

  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
Maintainers (1)
Downloads
Today 1
This Week 1
This Month 3
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |