webpack的簡單使用（js模塊化打包超級詳細）

1.安裝node或者檢查node的版本

webpack的使用依賴node，所以要先安裝node，另外node的版本也不能過低此處建議版本不要低於8.9

附上一篇很詳細的node安裝教程鏈接https://www.cnblogs.com/li150dan/p/10451772.html。

查看node的版本，在終端運行 node -v

2.安裝webpack(3.6.0)

我選擇了3.6.0的版本，因為本人也在學習vue,而vue cli2 使用的也是webpack3.6.0所以我們這里也使用webpack3.6.0，這樣我們熟悉了webpack3.6.0的相關配置和目錄文件部署，再去看cli2的結構就是水到渠成了。

首先我們先全局安裝webpack3.6.0，后面會局部安裝，兩者的差別我會在后面解釋，那么運行命令 ：

npm install webpack@3.6.0 -g

(我使用的是vscode，在vscode終端運行命令，使用復制是Ctrl + Insert，粘貼是Shift + Insert)。

3.文件目錄

這里是我創建的目錄，在webpack-lianxi文件夾下創建了兩個文件夾和一個index.html文件，其中src文件夾放入我們寫的各種js文件，然后dist是我們使用webpack打包之后生成的文件存放的位置。

首先在aaa.js 文件中我們隨便寫了兩個函數然后用commonJS的語法把兩個方法導出。

然后在info.js文件中用ES6的語法導出了一個變量

注意：

！！！！

在我這個例子中絕對不能把ES6和commonJS兩個導出規范寫在同一個js文件中，不然在打包的時候會報錯。報錯信息：**Uncaught TypeError: Cannot assign to read only property 'exports' of object **

然后在main.js文件中引入導出的這些變量

然后我們就可以在webpack-lianxi文件夾下運行終端，使用命令:

webpack ./src/main.js ./dist/bundle.js

bundle.js文件名可以隨意取，但后面自動打包時，會生成這么一個文件所以我們也取名叫這個名字。最后在index.html中引入這個文件就可以了。

瀏覽器控制台：

4.配置webpack.config.js文件使打包命令更簡單

在根目錄下新建文件webpack.config.js（目前此名字是一定的不能隨意更改)。在該文件下添加如下代碼

const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

entry 是入口文件，output是導出文件，但是我們不能簡單地設置為 './dist/bundle.js'，這里我們要使用絕對路徑，所以需要引入path，path是存在於node包里，這里涉及到node的知識，就不詳細講述，所以你還需要在終端運行這個命令：

npm init

（其實這一步你也可以在剛創建你的根目錄文件夾的時候就執行）

這個時候我們在終端只需運行命令 ： webpack，就會自動為我們打包了。

在這里值的說明的是根據我的推測，因為目前我們強制給自動打包配置文件取名為了webpack.config.js，所以當你執行webpack命令時他默認應該是執行了webpack webpack.config.js這個命令，那么我們能不能自己取名，比如取名wanglei.config.js，然后執行webpack wanglei.config.js呢，答案是不能！但后面項目中我們可能會運行多個配置文件 比如你又配置了某個配置文件 a.config.js 你就需要這樣寫命令webpack a.config.js，這樣寫起來會顯得很麻煩，所以我們可以在package.json中配置命令，如圖添加代碼：

另外如果之前你執行webpack這個命令，終端會去全局查找webpack，還記得我們一開始是使用的npm install webpack@3.6.0 -g來安裝的webpack嗎，我們自己聯系時是沒有任何問題，但當我們參與到公司項目中時，你把之前同事開發的項目clone下來，如果你的同事之前是基於webpack3.6.0來配置的，而你電腦上全局安裝的是大於這個版本的webpack那么就有可能出現問題，所以此時你需要在你clone下來的項目文件夾下局部安裝一個3.6.0的webpack來適配你同事的項目，此外我們使用webpack只是在開發時需要他幫我們打包，當我們發布到線上時是用不到webpack的，所以我們應該局部安裝一個開發時依賴那么運行如下命令：

npm install webpack@3.6.0 --save-dev

然后你就會看到他自動生成了下面這些：

當你使用命令npm run build 命令時，會優先在本地尋找你安裝的webpack！！！

本篇關於webpack打包js文件的介紹到這里就結束了。有問題歡迎留言。