Use of Vue--webpack

One: Define

Webpack can be seen as a modular baler: The thing it does is to analyze your project structure, find JavaScript modules and other extension languages (Scss,typescript, etc.) that the browser cannot run directly, and convert and package them into the appropriate format for use by the browser.

Plainly: is the back end of the language, the browser can not parse, and Webpack is an intermediary, the data packaging, translation to the browser can recognize the language, the final rendering page.

Second: the use of Webpack

Installation:

installation within the project;

1   -y ==> installs the JSON  file 2--save-Dev    #开发环境依赖PS: Only the JSON file is loaded first, Webpack will be installed in the project where the JSON file is located

View Code

Global Installation

-g can  export files in any directory using the Webpackwebpack import file

View Code

Three: Use code:

In the eyes of node all the files are modules, there are two ports, a inlet, a water outlet

Cases:

The first step:

  " Scripts " : {    "test""echo \" Error:no test specified\ "&& exit 1
    ",    "pack":"node_modules/.bin/ Webpack"     #配置好路径  }, since we are installed in the project, all Wenpack are installed in the bin directory, so first configure the path late call to run the command directly: NPM Run pack 

Configure Webpack paths in Packjage to reduce code generation

Second:

module.exports={entry:{Home:'./next/home.js', #输入口, before the file name, followed by the path signup:'./next/signup.js'    },        //filename required for outputoutput:{FileName:'[Name].bundle.js', #[name] refers to the home and signup introduced in the above name, the command refers to the saved exit name Path:__dirname+'/dist',//Export saved file path    }}

Configure the Webpack.config.js file, remember that the file step can change

Third, write the logic code at the entrance, and implement the last port code.

base. js file

var open=true; Export{open};

Judging Information

Home.js file

 from ' ./base ' if (Open) {    Document.body.innerHTML='    <a href='signup. "> Register </a>    '}

introduce the bool value of the Base.js file and make the corresponding action

Signup.js file

 from ' ./base ' if (Open) {    alert (123);}

reference base value, make a selection

Fourth step: Produce export documents

var open=True;P s: File name is generated by configuration Webpack.config.js

Home.bundle.js

var open=true; if (__webpack_imported_module_0__base__["a"/** * *]) {    Document.body.innerHTML='    <a href='signup.html ' > Registration </a>    '}

Signup.bundle.js

Finally, the resulting file can be other HTML references

<script src="./dist/home.bundle.js"></script><script src=" ./dist/signup.bundle.js "></script> produces different results.

aa.html

Generate Directory:

Use of Vue--webpack