1. Webpack load configuration package. vue File Notes

First, create an initialization of a NPM project, and then go back to select default in the terminal input NPM init Enter select Default, a Package.json file will appear and then you can install the required package two, install the required package because it's a small dome, let's simply configure Vue Input:

NPM I webpack vue vue-loader

Then there will be warn

NPM WARN [email protected] requires a peer of [email protected]* but none is installed.　　　　You must install peer dependencies yourself. NPM WARN vue[email protected] requires a peer of [email protected]^2.0.0 but none is installed. You must install peer dependencies yourself.

These two warn tell us that we need third-party dependencies, respectively Css-loader,vue-template-compiler. Third-party installation, relying on NPM i css-loader Vue-template-compiler Then our initialization project basically has been configured four, create a App.vue file/src/app.vue first create a src file as our source directory. Vue file is a special development method of Vue and he can write 1 in the file. That's what we put in our H. TML Code

<template></template>

2. Is our JS code

<script>default  {    data () {  return  {text: ' abc ' }} </script>

3.<style></style> is one of our components. Its unique style

These three points make up our Vue component template, which is what we need to show. Script is the style that controls how the content we display changes and controls how our inner softness shows

Create a webpack.config.js to run the component./webpack.config.js Webpack is used to help us package front-end resources such as javascript,css, pictures, fonts, etc. These things are our front-end resources to load through HTTP requests. So when we're developing webapp, it's a whole JS loaded into the browser and then all the content is rendered out so that we can often simply use the JS file as our portal to request a path package

Const path =require (' path ');

Path: is a benchmark package of NODEJS, it is used to process our path First we configure Module.exports = {entry:path///First need to declare the entry here using absolute path guarantee we do not have any problem} VI, create a index.js into　　Port file./src/index.js Src/app.vue is a component that cannot be hung directly into our HTML so we're going to create a portal file to mount us using the import vue from ' vue ' To reference our Vue class library We then use the import App from './app.vue ' to load App.vue and then we're new Vue ({}) and then we declare a render, he's the simplest way to receive an H parameter. The h parameter is the Createapp parameter in the Vue. And then through the H (APP) to the HTML inside now just declare the rendering is just the content of the APP, mount this step we also want to call one of his API called $mount () and then we can continue to create

Const ROOT = document.createelement (' div ')

And then we put the div inside the body.

Document.body.appendChild (Root)

Then plug the Vue content into root so we can show examples of what we app.vue inside:

1 Const ROOT = document.createelement (' div '); 2 Document.body.appendChild (root); 3 New Vue ({4  render: (h) = +h (App                                )5    }). $mount (Root)

Seven, configure entry path./webpack.config.js

1 module.exports={2 entry:path.join (__dirname, ' src/index.js ')3  }

Note: __dirname represents the directory where our webpack.config.js files are located his address, which is the root directory Path.join (__dirname, ' src/index.js ') is to be __ The directories behind the dirname and commas are stitched together to ensure that we have access to the files we want to access. Eight, set output export since we have a portal, we're going to set our exits to export our files.

1 module.exports={2 entry:path.join (__dirname, ' src/index.js '),3  output:{4 filename: ' bundle.js ',// output filename 5 path:path.join (__dirname, ' dist ')// Output path 6}7 } 　　　　

This is our input and output is we enter a index.js file eventually Webpack will put our index.js file and its dependencies on the files are packaged to him as a bundle.js and packaged out is we can run directly in the browser JS code nine, Add a script to Package.json./package.json

1 "Scripts": {2 "test": "Echo \" Error:no test specified\ "&& exit 1",
   
    3 "Build": "Webpack--config webpack.config.js"
    4 },
   

We package.json in the scripts Riga a "build": "Webpack--config webpack.config.js"; The meaning of this sentence is to use Webpack--config to specify our config file This is the Webpack.config.js file we configured. Why are we writing this? Because we only have to call Webpack in here, it will be the webpack that we install in this project if we lose directly in the command line, he will call the global Webpack this time the global webpack may be different from the version of the webpack we use. We still use this version to be more secure. After we've finished writing, we can type in the command line:

NPM Run Build

This time to run the error, will be reported only support ES5 syntax ten, processing grammar does not support us in using beyond his understanding of the grammar, we have to help him to deal with the syntax of the tool for us to deal with this file We add a configuration called module and we make rules for him. It's an array, and then we can write a lot of rules, and then we use a test:/.vue$/. This test is what we use to check the file type, 　　Inside it is a regular expression. Vue plus a $ is the end of the file with. Vue as we app.vue this type and then he uses the loader is ' Vue-loader ' Webpack is the use of Vue-loader to handle the App.vue file type for us this time we can output a correct JS code example:

1module.exports={2Entry:path.join (__dirname, ' src/index.js ')),3  　　　　 output:{4FileName: ' Bundle.js ',//the file name of the output5Path:path.join (__dirname, ' dist ')//Output Path6  　　　　　　　　 },7  　　　　 module:{8  　　　　　  rules:[9  　　　　　　　　　　 {Tentest:/.vue$/, OneLoader: ' Vue-loader ' A  　　　　　　　　　　 } -  　　　　　　　　 ] - } the}

We'll run it again this time.

NPM Run Build

At this point we will find a dist folder in our project directory. That proves our success.

1. Webpack load configuration package. vue File Notes