❤
npm
Sign UpSign In

zoro-tool

0.1.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i zoro-tool

Weekly Downloads

1

Version

0.1.1

License

ISC

Unpacked Size

102 kB

Total Files

81

Last publish

Collaborators

  • bigbo
Try on RunKit
Report malware