cooking配置

cooking 是一个基于 webpack 但是提供更简单的配置项，同时内置了许多常用配置的构建工具。

安装

Webpack 配置较繁琐，实际项目中使用 cooking npm 来搭建项目环境
参考手册：http://cookingjs.github.io/zh-cn/intro.html
安装：npm i cooking-cli -g
创建 vue 项目：npm init vue
执行项目：cooking watch
生产环境代码构建：cooking build

cooking.config.js 文件配置

配置多文件入口

1
2
3
4
5
6
7
8
9
10
11
12
13
entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
template: [{
  filename: 'index.html',
  template: 'src/index.tpl',
  chunks: ['index', 'vendor', 'manifest']
}, {
  filename: 'search.html',
  template: 'src/search.tpl',
  chunks: ['search', 'vendor', 'manifest']
}],

配置 host

1
2
3
4
5
devServer: {
   hostname: '192.168.1.155', （换为本地IP）
   port: 2001,
   protocol: 'http:',
}

配置 postcss、less、lint

1
2
3
4
postcss: [
   require('autoprefixer')
 ],
extends: ['vue', 'lint', 'less', 'autoprefixer']

全局 jQuery

1
2
3
4
5
6
7
cooking.add(
  'plugins.Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    'window.jQuery': 'jquery'
  })
)

添加 loader

1
2
3
4
cooking.add('loader.file', {
  test: /\.swf$/,
  loaders: ['file?name=[path][name].[ext]']
})
0%