Webpack+vue.js Quick Start Tutorials _javascript Tips

Objective

vuejs--lightweight, low learning cost, bidirectional binding, DOM-free operations, component form writing

Vuejs is a lightweight MVVM framework that aggregates the basic functions of angular, but is more streamlined than angular, which covers two-way binding, instruction, logic control, filters, event monitoring, functions, and so on. The features of the framework allow the project to have a great advantage in a state change, paging scenario-all operations require only changing the array, without any DOM manipulation.

Webpack--commonjs's references and writing methods, loader are very rich, including Vue-loader, Css-loader, Less-loader

Webpack is a front-end component of the solution, Webpack provides the core of the COMMONJS reference program to reference resources, the following article to introduce Webpack and Vue.js, take a look at it.

The creation of a project

1. Create a new project folder and create a Package.json in it

$ mkdir [project name]
$ CD [project name]
$ NPM init

2. New index.html under the project directory

<! DOCTYPE html>
 
 

src folder, and set up main.js under this folder

Import Vue from ' Vue '
new Vue ({
 el: ' Body ',
 data:{message
 : ' Test success! '
 }
});

Set Webpack

1. Installation of Webpack,webpack-dev-server and related loaders

# Global Install Webpack,webpack-dev-server
$ npm install-g webpack
$ npm install-g webpack-dev-server
# Install additional dependencies for the project 
   $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader Babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue Vue-loader Vue-style-loader vue-hot-reload-api-d

Webpack-merge: Configuration Merging of Webpaak configuration files for development environment and production

Css-loader: Compiling write CSS

Style-loader: Integrate the compiled CSS into the HTML

File-loader: Compile write file, by default the file name of the makefile is a combination of file name and MD5 hash value

Vue:vue Main Program

Vue-loader: Compiling write. vue file

Vue-html-loader: Compiling the template part of the Vue

Vue-style-loader: Compiling the style section of Vue

Vue-hot-reload-api:webpack to Vue to achieve hot swap

babel-core:es2015 Compiler Core

Babel-loader: Compiling write to ES2015 document

babel-preset-es2015:es2015 syntax

babel-preset-stage-0: Open Test function

Babel-runtime:babel Execution Environment

Url-loader

Here's an introduction to the next Url-loader, this loader is actually a package for File-loader

For example, CSS files sometimes write this:

. demo{
 Background-image:url (' a.png ');
}

module:{
 loaders:[
 {test:/\. ( png|jpg) $/,loader: ' url-loader?limit=8192 '}
 ]
}

After the above configuration, when the a.png is less than 8K will automatically convert the picture to Base64 encoding, if not less than, it will not be converted.

Here, incidentally, when the module is configured, the loader is written:

module:{
 loaders:[
 {test:/\.jade$/,loader: ' jade '}//Here is configured to Webpack Jade to
 identify loader, other similar, such as. Vue
 // Loader for CSS files are written in two ways
 {test:/\.css$/,loader: ' style!css '}
 {test:/\.css$/,loaders:[' style ', ' CSS '}
 ]
}

2. Configure Webpack.config.js

The Webpack.config.js is established under the root directory and is configured as follows:

var path = require (' path ');
Module.exports = {
 entry: './src/main.js ',
 //define Webpack output file, we set up
 here Let the packaged files be placed in the Build.js file under the Dist folder
 output: {
 path: './dist ',
 publicpath: ' dist/',
 filename: ' Build.js '
 },
 module: {
 loaders: [
 //convert ES6 syntax
 {
 test:/\.js$/,
 loader: ' Babel ',
 exclude:/node_modules/
 },
 //image conversion, less than 8K automatically converted to base64 encoding
 {
 test:/\. ( Png|jpg|gif) $/,
 loader: ' url-loader?limit=8192 '
 }
 ]
 },
 //This is used to install Babel, If the. BABELRC is configured in the root directory, Babel is not written here
 : {
 presets: [' es2015 ', ' stage-0 '],
 plugins: [' transform-runtime ']
 }
}

Special Notes

If you want to configure Babel under. BABELRC, you need to create a new file in the root directory, under Windows environment, you cannot create a new TXT file and then change the suffix, which you need to create by using DOS commands:

Echo>.babelrc

This command allows you to create a Babelde configuration file, open with the editor, and modify the contents as follows:

{
 "presets": ["es2015", "stage-0"],
 "plugins": ["Transform-runtime"]
}

Complete the configuration we run in the command

$ webpack

Open index.html to see the text we just wrote in the browser

Summarize

So far we have achieved the most basic use of webpack packaging vue, we would be best to actually operate the code to better understand, I hope this article for everyone can help, if you have questions you can message exchange.