Vue. js & mdash; 60-minute webpack Project template Quick Start, vue. jswebpack

Vue. js -- 60-minute webpack Project template Quick Start, vue. jswebpack
Overview

Browserify is a CommonJS-style module management and packaging tool. In the previous article, we briefly introduced a set of development templates built by Vue. js Based on browserify. Webpack provides similar features as browserify. It provides better features in front-end resource management.
Webpack provides two official project templates: vue-webpack-simple and vue-webpack. Today we will introduce these two official project templates, use the vue-webpack-simple template to create a simple example.

The Demo and source code of this article have been put on GitHub. If you think the content is good, please like it or add a star on GitHub!

Vue-webpack-simple example GitHub Source Webpack Introduction

Webpack is the most popular modular management and packaging tool for front-end resources. It can package many loose modules into front-end resources that meet the production environment according to dependencies and rules, you can also split the code of the On-Demand modules and load them asynchronously when needed. PassloaderAny form of resource can be regarded as a module, such as CommonJs module, AMD module, ES6 module, CSS, image, JSON, Coffeescript, and LESS.

It is an official introduction to Webpack. This figure shows that some module files that depend on each other are packaged into one or more js files, which can reduce the number of HTTP requests.

 

Features supported by Webpack:

As this document is not a webpack tutorial, you need to know about webpack.

Webpack home: http://webpack.github.io/

Environment preparation

Node. js and Git are essential tools. The NPM version should be later than 3.x, and NPM 3.x provides more effective package dependency management.

Before using these two project templates, install vue cli and run the following command to install vue cli:

npm install -g vue-cli

After installing vue cli, you can create a project based on the vue-webpack-simple template and vue-webpack template.

Use vue-webpack-simple template 1. Generate a project

Right-click a directory and run Git Bash Here. For example, my directory is D: \ VueOfficialTemplates.

Run the following command in git bash:

vue init webpack-simple my-webpack-simple-demo

webpack-simpleIs the name of the project template,my-webpack-simple-demoIs the name of the project you want to generate.

The directory generates a folder my-webpack-simple-demo.

2. Project Structure Description

Open the my-webpack-simple-demo folder and see the following directory structure:

The file tree structure is as follows:

─ ──. Babelrc // babelconfiguration file zookeeper .gitignore1_index.html // The home page contains-package. json // project configuration file ‑readme. md restart-webpack. config. js // webpack configuration file ├ ── dist // release directory │ ├ ──. gitkeep example-src // Development Directory │ example-App. vue // App. vue component │ kernel-main. js // pre-compilation entry

Compared with the browserify-simple template, A webpack. config. js file is added.

Package. json

{  "name": "my-webpack-simple-demo",  "description": "A Vue.js project",  "author": "keepfool <crmug@outlook.com>",  "private": true,  "scripts": {    "dev": "webpack-dev-server --inline --hot",    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"  },  "dependencies": {    "vue": "^1.0.0",    "babel-runtime": "^6.0.0"  },  "devDependencies": {    "babel-core": "^6.0.0",    "babel-loader": "^6.0.0",    "babel-plugin-transform-runtime": "^6.0.0",    "babel-preset-es2015": "^6.0.0",    "babel-preset-stage-2": "^6.0.0",    "cross-env": "^1.0.6",    "css-loader": "^0.23.0",    "file-loader": "^0.8.4",    "json-loader": "^0.5.4",    "url-loader": "^0.5.7",    "vue-hot-reload-api": "^1.2.0",    "vue-html-loader": "^1.0.0",    "vue-loader": "^8.2.1",    "vue-style-loader": "^1.0.0",    "webpack": "^1.12.2",    "webpack-dev-server": "^1.12.0"  }}

It depends on babel, various loaders, and webpack during development, and vue and babel-runtime for release.
The scripts Node also defines the compilation commands during development and release. Unlike browserify, the compiled input and output are defined in the webpack. config. js file.

Webpack. config. js

var path = require('path')var webpack = require('webpack')module.exports = {  entry: './src/main.js',  output: {    path: path.resolve(__dirname, './dist'),    publicPath: '/dist/',    filename: 'build.js'  },  resolveLoader: {    root: path.join(__dirname, 'node_modules'),  },  module: {    loaders: [      {        test: /\.vue$/,        loader: 'vue'      },      {        test: /\.js$/,        loader: 'babel',        exclude: /node_modules/      },      {        test: /\.json$/,        loader: 'json'      },      {        test: /\.html$/,        loader: 'vue-html'      },      {        test: /\.(png|jpg|gif|svg)$/,        loader: 'url',        query: {          limit: 10000,          name: '[name].[ext]?[hash]'        }      }    ]  },  devServer: {    historyApiFallback: true,    noInfo: true  },  devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') {  module.exports.devtool = '#source-map'  // http://vue-loader.vuejs.org/en/workflow/production.html  module.exports.plugins = (module.exports.plugins || []).concat([    new webpack.DefinePlugin({      'process.env': {        NODE_ENV: '"production"'      }    }),    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false      }    }),    new webpack.optimize.OccurenceOrderPlugin()  ])}

The content of webpack. config. js is quite understandable. It adopts the CommonJS writing method, the entry node configures the compilation entry, and the output node configures the output.
The meaning of this entry and output configuration is: Compile the src/main. js file and output it to the dist/build. js file.

3. Install project Dependencies

Run the following command to install the project dependency:

cd my-webpack-simple-demonpm install

After the installation is complete, a node_modules folder is generated in the directory.

Project-related dependencies are stored in this folder, which is much more dependent than the vue-browserify-simple project template.

4. Running example

Run the following command:

npm run dev

Open 127.0.0.1: 8080 and you will see the following screen:

Note: Unlike browserifynpm run devThe build. js file is not generated in the dist directory after the command, and the build. js file is in the running memory in the development environment.

5. Release

Execute the following command to generate the build. js at release and compress it.

npm run build

Use the vue-webpack Template

Open a git bash window and run the following command:

vue init webpack my-webpack-demo

webpackIs a project template,my-webpack-demoIs the project name.

The directory generates a folder my-webpack-demo:

The file directory structure is as follows (refer to: https://vuejs-templates.github.io/webpack/structure.html)

├── build/                      # webpack config files│   └── ...├── config/                     │   ├── index.js                # main project config│   └── ...├── src/│   ├── main.js                 # app entry file│   ├── App.vue                 # main app component│   ├── components/             # ui components│   │   └── ...│   └── assets/                 # module assets (processed by webpack)│       └── ...├── static/                     # pure static assets (directly copied)├── test/│   └── unit/                   # unit tests│   │   ├── specs/              # test spec files│   │   ├── index.js            # test build entry file│   │   └── karma.conf.js       # test runner config file│   └── e2e/                    # e2e tests│   │   ├── specs/              # test spec files│   │   ├── custom-assertions/  # custom assertions for e2e tests│   │   ├── runner.js           # test runner script│   │   └── nightwatch.conf.js  # test runner config file├── .babelrc                    # babel config├── .editorconfig.js            # editor config├── .eslintrc.js                # eslint config├── index.html                  # index.html template└── package.json                # build scripts and dependencies

2. Install Dependencies

Run the following two lines to install the project dependency:

cd my-webpack-demonpm install

(The installation process is slow and you need to wait ...)

3. Running example

Run the following command:

npm run dev

Open 127.0.0.1: 8080 and you will see the following screen:

4. Release

Run the following command to generate a release:

npm run build

Different from the vue-simple-webpackage template, all the static resources and the package index.html are generated under the dist directory.

This means that you can directly publish applications with the dist directory. For example, you can publish the dist directory as a website under IIS.

Vue-simple-webpack example

Yesterday we used the vue-simple-browserify template as a small example. Today we will use the vue-simple-webpack template to complete the same example.

I will not post the code for this example. You can download it at the GitHub address at the beginning of this article.

View Demo Summary

Both browserify and webpack are packaging and module dependency management tools. webpack has stronger functions than browserify. Which tool to use depends on your personal preferences and project requirements.
Undoubtedly, Vue. several official js project templates based on vue cli, browserify, and webpack can indeed bring us great convenience and allow us to invest in development quickly.
In the subsequent chapters, I will try my best to explain Vue. js based on these project templates.