vue --webpack的使用

一:定義

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

說白了:就是後端的語言,瀏覽器不能解析,而webpack就是一箇中間人,把數據打包,翻譯給瀏覽器能識別的語言,最後渲染頁面.

 

二:webpack的使用

安裝:

項目內安裝;

1,首先先執行npm命令,安裝json文件 npm init -y   ==>會安裝json文件 2,安裝包webpack npm i(install) webpack --save-dev #開發環境依賴 PS:只有先裝json文件,webpack纔會安裝在json文件所在的項目處

View Code

全局安裝

在全局安裝webpack npm install webpack -g 能夠在任何目錄下用webpack webpack 入口文件 出口文件

View Code

 

 

三:使用代碼:

在node的眼裏全部的文件都是模塊,都有兩個口,一個入水口,一個出水口

例:

第一步:

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "pack":"node_modules/.bin/webpack" #配置好路徑 }, 因爲咱們是項目裏安裝,全部wenpack安裝在bin目錄,因此先配置好路徑 後期調用直接運行命令: npm run pack

在packjage配置webpack路徑,減小代碼產生

第二:

module.exports={ entry:{ home:'./next/home.js', #輸入口,前爲文件名,後爲文件路徑 signup:'./next/signup.js' }, //須要輸出的文件名
 output:{ filename:'[name].bundle.js', #[name]是指上面的home和signup引入名,正條命令是指保存的出口名 path:__dirname+'/dist',    //出口保存的文件路徑
 } }

配置webpack.config.js文件,記住文件步能改變

第三,入口處寫好邏輯代碼,實現最後處口代碼

base.js文件

var open=true; export{open};

判斷信息

home.js文件

import {open} from './base'

if(open){ document.body.innerHTML=` <a href="signup.">註冊</a> ` }

引入base.js文件的bool值,做出相應的動做

signup.js文件

import {open} from './base'

if(open){ alert(123); }

引用base值,做出選擇

 

第四步:產生出口文件

var open=true; PS:文件名是配置webpack.config.js產生的

home.bundle.js

var open=true; if(__WEBPACK_IMPORTED_MODULE_0__base__["a" /* open */]){ document.body.innerHTML=` <a href="signup.html">註冊</a> ` }

signup.bundle.js

 

最後,產生文件能夠別其餘html引用

<script src="./dist/home.bundle.js"></script>
<script src="./dist/signup.bundle.js"></script> 產生不一樣的結果

aa.html

 

產生目錄如圖: