cooking 1.0 -- 更简单优雅的方式配置 webpack

[cinwell]

饿了么前端团队开源的基于 webpack 的构建工具 -- cooking ，已经发布了正式版。之前是一个全局安装的命令行工具，能方便的快速创建项目、简化了配置，并且全局安装了开发依赖无需每个项目都安装一份。

现在升级到 1.0 后将工具拆分 cooking 和 cooking-cli ，前者负责提供简化配置的功能，后者融合了之前的脚手架和依赖管理功能。所以可以按项目需要本地安装依赖还是直接用全局的依赖。

链接

• 项目地址: https://github.com/ElemeFE/cooking
• 文档: https://cookingjs.github.io
• 教程: 用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)

简单示范简化后的配置

var cooking = require('cooking');

cooking.set({
  entry: './src/index.js',
  dist: './dist',
  template: './index.html',
  devServer: { port: 8888, publicPath: '/' },
  postcss: [
    require('postcss-salad')
  ]
});

module.exports = cooking.resolve();

等同于 webpack 的

module.exports = {
  entry: './src/index.js',
  output: {
    publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
    path: require('path').resolve(process.cwd(), './dist'),
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: process.cwd(),
        exclude: /node_modules|bower_components/,
        loaders: ['babel-loader']
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: require('path').resolve(process.cwd(), './index.html')
    })
  ],
  postcss: function() {
    return [require('postcss-salad')]
  },
  devServer: { port: 8888 }
}