一:定義

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文件所在的項目處
 

全局安裝

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

三:使用代碼:

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

例:

第一步:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack":"node_modules/.bin/webpack"     #配置好路徑
  },

由於我們是項目裏安裝,所有wenpack安裝在bin目錄,所以先配置好路徑
後期調用直接運行命令: npm run pack
 

第二:

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

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

base.js文件

var open=true;
export{open};

home.js文件

import {open} from ‘./base‘

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

signup.js文件

import {open} from ‘./base‘

if(open){
    alert(123);
}

第四步:產生出口文件

var open=true;

PS:文件名是配置webpack.config.js產生的

var open=true;

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

最後,產生文件可以別其他html引用

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

產生不同的結果

產生目錄如圖:

vue --webpack的使用