基于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配置