Configuration parameters

cooking encapsulates some webpack parameters that satisfy most projects' basic needs. *The 1.0 inside parentheses means the feature is introduced in cooking@1.0.0.

entry

Defines the entry point. Same as webpack's entry. Accepts String|Array|Object

// single entry point
{
  entry: './src/index.js'
}

// multiple entry points that bundle to a single file
{
  entry: ['./src/pageA.js', './src/pageB.js']
}

// multiple entry points that bundle respectively to page1.js and page2.js
{
  entry: {
    page1: './page1',
    page2: ['./entry1', './entry2']
  }
}

dist

Project output path. Same as output.path but requires a relative path instead. The bundled files goes here

{
  dist: './dist'
}

template

HTML template, generated by html-webpack-plugin. Accepts Boolean|String|Object

// generate a index.html automatically
{
  template: true
}

// generate a index.html from the appointed template file (in relative path)
{
  template: './src/index.tpl'
}

// appoint template files for multiple pages
{
  template: {
    'index.html': './src/index.tpl',
    'admin.html': './src/admin.tpl'
  }
}

// if you need more html-webpack-plugin customization
{
  template: {
    'admin.html': {
      filename: 'test.html', // use the key name (in this case, 'admin.html') if omitted
      chunks: ['admin', 'vendor'], // apply different chunks for different pages
      template: 'src/assets/test.tpl',
    },
    'home.html': {
      template: 'src/assets/home.tpl',
      chunks: ['home', 'vendor']
    }
  }
}

// array supported
{
  template: [
    {
      filename: 'admin.html',
      template: 'src/assets/admin.tpl',
      chunks: ['admin', 'vendor']
    },
    {
      filename: 'index.html',
      template: 'src/assets/home.tpl',
      chunks: ['home', 'vendor']
    }
  ]
}

devServer

cooking has a built-in devServer whose configuration is pretty mush the same as webpack-dev-server. Note that the APIs in different versions of webpack may vary

// open a devServer using default configurations (see below). Visit http://localhost:8080
{
  devServer: true
}

// default configurations (you can customize them):
{
  devServer: {
    // open a devServer
    enable: true,

    // path of output files, overwrites `publicPath` below
    publicPath: '/',

    // hot reload
    hot: true,

    // extract CSS
    extractCSS: false,

    // display in-page logs
    log: true,

    port: 8080,
    hostname: 'localhost',
    protocol: 'http:',

    // HTML5 history API
    historyApiFallback: true,

    // console output configurations
    stats: 'errors-only',
    noInfo: true,
    quiet: false,
    lazy: false
  }
}

publicPath

Same as output.publicPath. Default value is /dist/1

{
  publicPath: '/dist/'
}

assetsPath

Images and font files are classified as asset files. Configure assetPath if you want them output to a subdirectory relative to dist

{
  assetsPath: 'static'
}

urlLoaderLimit

Asset files whose size are below urlLoaderLimit will be embedded inside JS or CSS files. Default value is 10000 (in Byte)

{
  urlLoaderLimit: 10000
}

clean

Determines if output directory is cleaned in each build. Default value is false

{
  clean: false
}

hash

Determines if output files have a 7-digit hash. Default value is false

{
  hash: false
}

sourceMap

Determines if a source map is generated. Default value is false

{
  sourceMap: false
}

format

Determines which format to export the module. Accepts amd|cjs|umd|var where cjs means commonjs2 in webpack

{
  format: 'var'
}

moduleName

Same as webpack's output.library

{
  moduleName: ''
}

chunk

A simplified configuration for webpack's chunk that extracts common code chunks. Accepts String|Object. Default value is void

{
  entry: {
    app: './src/entry.js',
    vendor: ['vue', 'vue-router']
  },

  chunk: ['vendor']
}

// set true, equal to https://github.com/vuejs-templates/webpack/blob/dist/template/build/webpack.prod.conf.js#L62-L82
{
  entry: './src/entry.js',
  chunk: true
}

// array supported
{
  entry: {
    app: './src/entry.js',
    vendor: ['vue', 'vue-router']
  },

  chunk: ['vendor', 'manifest']
}

// if you need more CommonsChunkPlugin customization
{
  chunk: {
    'chunk-vendor': {
      name: 'commons', // use the key name (in this case, 'chunk-vendor') if omitted
      // (common chunk name)

      filename: 'commons.js', // use the key name if omitted (hashed in production mode)
      // (filename of the common chunk)

      // minChunks: 3,
      // (modules must be shared among at least 3 entries)

      // chunks: ['pageA', 'pageB'],
      // (only use these entries)
    }
  }
}

extractCSS

Extracts CSS to independent files. Accepts Boolean|String. Default value is [name].[contenthash:7].css

// determines if CSS is extracted
{
  extractCSS: true // this will use the default file name
}

// customized file name
{
  extractCSS: 'style.css'
}

extends

cooking provides Babel and some basic loaders by default. If you want to start a vue-based project that runs lint before build, you can use cooking's extends. In the following example cooking-vue and cooking-lint plugins are imported (downloads automatically if not installed). The cooking-vue plugin configures vue-loader, while the cooking-lint plugin provides eslint,several standard eslint configs, and configures eslint-loader。

{
  extends: ['vue', 'lint']
}

If the plugin supports cunstomized parameters, you can pass a Object. Take postcss for example2

{
  extends: {
    vue: true,
    postcss: {
      cssnext: true
    }
  }
}

You can explicitly specify plugin's version

{
  extends: ['vue@0.1.4']
}

alias (1.0)

Configures path aliases. Same as webpack's resolve.alias

{
  alias: {
    'src': require('path').join(__dirname, './src')
  }
}

externals (1.0)

Same as webpack's externals

{
  externals: {
    'vue': 'vue'
  }
}

postcss (1.0)

Configures postcss

{
  postcss: [
    require('postcss-salad'),
    require('postcss-px2rem')
  ]
}

// callback supported
{
  postcss: function(webpack) {
    return [
      require('postcss-import')({
        features: {
          partialImport: {
            addDependencyTo: webapck
          }
        }
      })
    ]
  }
}

minimize (1.0)

Specify if JS and CSS files are compressed. In production mode, its default value is true

{
  minimize: false
}

// object supported
{
  minimize: {
    js: true,
    css: true
  }
}

static (1.0)

static assets folder

{
  static: true, // default using `static` folder
  static: 'assets', // or you can naming it
  static: ['static', 'docs'] // multiple folders
}

1. In most cases a directory, e.g. fe.project, is specified as the deploy directory, and the output files are copied to this directory. But if the domain name is linked to fe.project/dist/index.html, then the path of app.js relative to the domain name becomes /dist/app.js. That's where publicPath kicks in. You can also configure it as a CDN path. If dist is the deploy directory and the domain name is linked to dist/index.html, the path of app.js is /app.js. In this case, simply specify publicPath as / and you are good to go.
2. For more information, please refer to cooking-postcss documentation