vue.js--60 min Webpack project template Quick Start

Overview

Browserify is a COMMONJS-style module management and Packaging tool, the previous one we briefly introduced the vue.js of the official browserify-based building of a set of development templates. Webpack provides functionality similar to Browserify, which provides better functionality in front-end resource management.
The official Webpack provides two project templates, the Vue-webpack-simple template and the Vue-webpack template, and today we will present the two official project templates and create a simple example with the vue-webpack-simple template.

The demo and source code for this article has been put on GitHub, and if you think it's a good one, please click on it or add a star on GitHub!

Vue-webpack-simple Sample GitHub Sourcewebpack Introduction

Webpack is now the hottest front-end resource modular management and packaging tool that can package a number of loose modules into a front-end resource that fits into a production environment by relying on and rules, as well as code-splitting the load-on-demand modules and then asynchronously loading them when they actually need them. Through loader the conversion, any form of resources can be regarded as modules, such as CommonJs module, AMD module, ES6 module, CSS, image, JSON, coffeescript, less and so on.

Is the official profile of the webpack, it is not difficult to see that some of the interdependent module files, will be packaged into one or more JS files, can reduce the number of HTTP requests.

Features Supported by Webpack:

1. Supports COMMONJS and AMD modules, meaning that we can basically migrate old projects without pain.
2. Inline module loaders and plug-in mechanisms for greater flexibility and extensibility, such as support for Coffeescript, ES6.
3. Can be packaged into multiple files through configuration or intelligent analysis to implement public modules or load on demand.
4. Static resources such as style files and pictures can also be packaged as modules. With the loader loader, you can support CSS preprocessor such as sass,less.
5. The built-in source map is easy to debug even if packaged together.

As this article is not a webpack tutorial, so webpack related to some of the knowledge you need to understand.

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

Environment preparation

node. js and Git are essential tools, and NPM's version is better than the 3.x version, NPM 3.x provides more efficient package dependency management.

Before using these two project templates, you need to install the Vue CLI and execute the following command to install the Vue CLI

NPM install-g VUE-CLI

After installing the Vue CLI, we can create the project based on the vue-webpack-simple template and the Vue-webpack template.

Using Vue-webpack-simple templates 1. Build Project

Right-click a directory to run Git Bash here, like my directory is D:\VueOfficialTemplates.

Under Git bash, enter the following command:

My-webpack-simple-demo

webpack-simpleis the name of the project template and the my-webpack-simple-demo name of the project that you want to build.

A folder My-webpack-simple-demo is generated under the directory.

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//Babel profile ├─.gitignore├─index.html//home ├─package.json//project configuration file ├─readme.md  ├─webpack.config.js//Webpack profile ├─dist//Publish directory │   ├─.gitkeep       ├─src//Development Directory │├─app.vue// App.vue component │├─main.js//Pre-compiled entry       

More than one webpack.config.js file compared to the browserify-simple template.

Package.json

{"Name":"My-webpack-simple-demo","description":"A vue.js Project","Author":"Keepfool <[email protected]>","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", " ^0.5.4 ", " Url-loader ":  "^0.5.7",  "Vue-hot-reload-api": " Vue-html-loader ": " ^1.0.0 ",  "Vue-loader":  "^8.2.1", " ^1.0.0 ", " Webpack ":  "^1.12.2",  "Webpack-dev-server":                

Development relies on Babel, various loader and Webpack, and is published with Vue and Babel-runtime.
The Scripts node also defines the compile command at the time of development and release, and 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: 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: new webpack.optimize.UglifyJsPlugin ({compress: {warnings:  False}), new Webpack.optimize.OccurenceOrderPlugin ()])}     

Webpack.config.js content is better understood, it takes the commonjs of writing, entry node configuration of the compiler entry, output node configuration outputs.
The meaning of this entry and output configuration is to compile the src/main.js file and then output it to the Dist/build.js file.

3. Installation Project Dependencies

Execute the following command to install the project dependencies:

CD MY-WEBPACK-SIMPLE-DEMONPM Install

After the installation is complete, a Node_modules folder is generated under the directory.

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

4. Running the sample

Run the example by executing the following command:

NPM Run Dev

Open 127.0.0.1:8080, you can see the following screen:

Note: Unlike Browserify, the npm run dev build.js file is not generated in the Dist directory after the command is executed, and Build.js is running in memory under the development environment.

5. Release

Executing the following command generates the Build.js at the time of publication and is compressed.

NPM Run Build

Using the Vue-webpack template

Reopen a git bash window and execute the following command:

My-webpack-demo

webpackIs the project template, which my-webpack-demo is the project name.

A folder is generated under the directory My-webpack-demo:

The file directory structure is as follows (ref.: 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│├──compon ents/# UI components││└── ... │└──assets/# Module assets (processed by Webpack) │└── ... ├──static/# Pure static assets (directly copied) ├──test/│└──unit/# Unit Test s││├──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 AssertionsFor 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. Installation dependencies

The following two lines of command are executed to install the project dependencies:

CD MY-WEBPACK-DEMONPM Install

(The installation process is slow, you need to wait patiently ...) ）

3. Running the sample

Run the example by executing the following command:

NPM Run Dev

Open 127.0.0.1:8080, you can see the following screen:

4. Release

Execute the following command to generate the publication:

NPM Run Build

Unlike the Vue-simple-webpack template, all static resources, including index.html, are generated into the dist directory.

This means that you can directly take the Dist directory to publish your app, such as publishing the Dist directory as a Web site under IIS.

Vue-simple-webpack Example

Yesterday we used the vue-simple-browserify template to do a small example, today we use the Vue-simple-webpack template to complete the same example.

The code for this example is not posted, so you can go to the GitHub address at the beginning of this article to download it.

View Demo Summary

Browserify and Webpack are both packaging and module-dependent management tools, webpack have more features than browserify, and which tool to use depends on your personal preferences and project requirements.
Undoubtedly, the Vue.js official based on Vue CLI, browserify, Webpack built several project templates, really can bring us a lot of convenience, can let us quickly into the development.
In the following chapters, I will try to explain the vue.js on the basis of these project templates as much as possible.

vue.js--60 min Webpack project template Quick Start