This article is suitable for beginners to Vue, as well as those unfamiliar with WebPack. The prerequisite is that you can use the basic command line, Node and NPM, and have a basic knowledge of ES2015. NPM >= 3 and Node >= 4 are required to run on macOS. We will use Vue 2.0 with Webpack 2.0 as a tutorial.

Those of you who have written Vue projects have more or less used VUE-CLI to build Vue + Webpack projects. For starters, the first time you build this project, you have to worry — what the hell are all the webPack configuration files generated for?

Pure WebPack building a Vue project does require a lot of configuration to handle Vue files, CSS preprocessing, static resources, compression, hot replacement, and so on. It’s normal to be overwhelmed at first. In many cases these Webpack configurations can be standardized or even encapsulated to simplify their configuration. Cooking does this for us, so we can easily set up a development environment for Vue projects. I will walk you through the steps of building a Vue project from scratch.

Create an empty project

Not much to say, create a directory and go in, initialize git and NPM, fill in the relevant information.

mkdir my-vue && cd my-vue && git init && npm initCopy the code

Install the cooking

If we do not use VUE-CLI, we may not know what dependencies are needed to build a VUE environment. It doesn’t matter.

NPM I cooking@next -d # I is short for install, -d is short for --dev-saveCopy the code

If accessing NPM is slow, use npminstall (npminstall) in amway. I will use npminstall instead of NPM I.

NPM npminstall - g - registry=https://registry.npm.taobao.org # then I can use it to install depend on npminstall cooking @ next - DCopy the code

After the installation, you will be reminded to install a list of dependencies that you need to build a basic front-end development environment: Babel handles ES2015; Postcss, CSS-loader, and style-loader process CSS files. Html-webpack-plugin is used to generate HTML templates and so on. Of course, don’t worry about that for the moment. We just need to install these dependencies.

├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY CSS - loader @ ^ 0.24.0 ├ ─ ─ UNMET PEER DEPENDENCY extract - text - webpack - plugin @ ^ 1.0.0 | | ^ 2.0.0 - beta ├ ─ ─ UNMET PEER DEPENDENCY File-loader @^0.9.0 ├─ UNMET PEER DEPENDENCY ├─ UNMET PEER DEPENDENCY html-webpack-plugin@^ 2.07 ├─ UNMET PEER DEPENDENCY Json - Loader @^0.5.4 ├─ UNMET PEER DEPENDENCY Postcss @^5.1.0 ├─ UNMET PEER DEPENDENCY Postcss @^5.1.0 ├─ UNMET PEER DEPENDENCY Postcss Postcss-loader @^ 0.2.1 ├─ UNMET PEER DEPENDENCY ├─ PostCSs-Loader @^ 0.2.1 ├─ UNMET PEER DEPENDENCY Url - Loader @^0.5.7 ├─ UNMET PEER DEPENDENCY webpack @ ^ 1.12.0 | | ^ 2.1.0 - beta └ ─ ─ UNMET PEER DEPENDENCY webpack dev - server @ ^ 1.14.0 | | ^ 2.1.0 - betaCopy the code

At this point we have to choose whether we want to build the environment with WebPack 1 or 2. Both apis change slightly, but there is some compatibility inside cooking, which means that we will write the same configuration with 1 or 2.

If you choose to install WebPack 1 then install these dependencies:

npminstall babel-core babel-loader css-loader file-loader postcss postcss-loader\
 html-loader html-webpack-plugin json-loader style-loader url-loader\
 webpack@1 webpack-dev-server@1 extract-text-webpack-plugin@1 -DCopy the code

If you choose WebPack 2, since webPack 2 is still in beta, you can install it like this:

npminstall babel-core babel-loader css-loader file-loader postcss postcss-loader\
 html-loader html-webpack-plugin json-loader style-loader url-loader\
 webpack@beta webpack-dev-server@beta extract-text-webpack-plugin@beta -DCopy the code

Start writing the simplest configuration

Now that the basic dependencies have been installed, we will try to write a simple configuration to see how cooking is used. Start by creating a configuration file called havers.conf.js and open it with your favorite editor. Write down the following.

Var cooking = require('cooking'); // Set ({entry: './ SRC /index.js', // specify entry file dist: './dist', // set the hash of the wrapped file directory: True, // Packaged file hash sourceMap: true // packaged file hash sourceMap}); Module.exports = havers.resolve (); // generate webpack configuration and export module.exports = havers.resolve ();Copy the code

New and configure the Babel configuration file –.babelrc, and run npminstall babel-es2015 -d to install PRESET -es2015.

{
  "presets": ["es2015"],
  "comments": false
}Copy the code

Create a SRC /index.js entry file and write some ES2015 code, so the current directory structure is as follows:

my-vue\
  src\
    index.js
  cooking.conf.js
  .babelrc
  package.jsonCopy the code

To facilitate invoking the cooking command line, we configure a cooking script in package.json.

{
  "scripts": {
    "cooking": "cooking"
  }
}Copy the code

Run cooking Build. -p indicates that the progress bar is started.

npm run cooking build -- -pCopy the code

We end up with a dist directory with a zipped app.[hash].js file. So how do you write a traditional WebPack configuration?

var webpack = require('webpack');

module.export = {
  devtool: '#source-map',
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: '[name].[hash:7].js'
  },
  module: {
    loaders: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: process.cwd(),
        exclude: /node_modules|bower_components/,
        loaders: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {warnings: false},
      output: {comments: false},
      sourceMap: true
    })
  ]
}Copy the code

Cooking saves us a lot of standardized configuration items that we don’t have to worry about, and ends up doing the same thing with a few simple lines of configuration.

Configuration of the most basic Vue project

With that in mind, let’s write a simple configuration for the Vue project. First, of course, you need to install vUE.

npm i vue@next -SCopy the code

Next we write the code to create a Vue instance in the SRC /index.js file.

import Vue from 'vue'
import App from './app'

new Vue({
  el: '#app',
  render: h => h(App)
})Copy the code

Then create the SRC/app.vue file.






  h1 {
    color: red;
  }
Copy the code

Then create an HTML template file in the root directory and name it index.html.




  
  Document


  Copy the code

Now we need to set up a development environment that supports hot replacement, handles CSS and Vue files, and automatically applies packaged files to HTML templates to see what configuration is required. Return to the havers.conf.js file.

var cooking = require('cooking'); cooking.set({ entry: './src/index.js', dist: './dist', hash: true, sourceMap: true, template: './index.html', // load the index. HTML template devServer: {// open webpack-dev-server port: 8888, // port: 8888 publicPath: }, extends: ['vue2'] // Load havel-vue2, automatically configure Vue 2.0}); module.exports = cooking.resolve();Copy the code

Only three more lines of configuration, of course, a lot of internal work. Where havel-vue2 needs to be installed separately, execute npminstall havel-vue2 -d. There will be an error if you do not install it. This is when we start development mode.

NPM Run Cooking Watch # Open http://localhost:8888 visitCopy the code

At this point, a simple development environment is built.



Add CSS preprocessing

Whether you prefer Sass, Less, or PostCSS, it’s easy to configure. The first two plug-ins can be installed directly after the extends configuration, such as configuring Sass and then executing npminstall cooking-sass -d

{
  extends: ['vue2', 'sass']
}Copy the code

If you use PostCSS, you simply configure the configuration item to the PostCSS property, accepting array and function types

{
  postcss: [
    require('postcss-salad')
  ]
}Copy the code

Finally, change the configuration according to your personal preference

If you want to extract CSS as a separate file, or want to extract CommonChunk, or want to add eslint, it is also easy to do in cooking. Let’s add some general information to complete the final configuration file.

var cooking = require('cooking'); Set ({entry: {app: './ SRC /index.js', vendor: ['vue']}, dist: './dist', clear: true, // true, sourceMap: true, template: './index.html', devServer: { port: 8888, publicPath: '/' }, postcss: [require('postcss-salad')], extractCSS: true, // ['vendor', // The entry file defined in the entry, that is, the vue will be packaged separately. 'manifest' // This is not declared in the entry will be packaged for all common parts, Webpack Runtime], publicPath: '/dist/', // extends a packaged resource file relative to the URL: ['vue2', 'lint'] // Install the havel-lint and configure the '.eslintrc' file}); module.exports = cooking.resolve();Copy the code

Finally, change the scripts in package.json to make it easier to call.

"scripts": {
  "dev": "cooking watch",
  "dist": "cooking build -p"
}Copy the code

At the end

At this point, a simple and elegant Vue project development environment is built. It’s not good enough, though, so why do we create projects manually? Why install so many dependencies manually? Why does every project install the same pair of dependencies? In the next article, we will teach you how to use Cooking – CLI to further enhance the development experience.

I will post the source code of this project on Github.

  • cooking-demo/simple

  • cooking

  • Cooking document

  • npminstall