Vue--webpack打包js文件

介紹

webpack是一個前端的靜態資源打包工具，能讓瀏覽器也支持模塊化。它將根據模塊的依賴關系 進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

官網：https://webpack.docschina.org/

webpack的作用有下面幾點：

webpack核心主要進行javascript資源打包。

• 它結合其他工具， 將多種靜態資源css、png、sass分類轉換成一個個靜態文件，這樣可以減少頁面的請求。
• 可集成babel工具實現EcmaScript 6 轉 EcmaScript 5 ，解決兼容性問題。
• 可集成http服務器。
• 可集成模塊熱加載，當代碼改變后自動刷新瀏覽器等等功能。

 安裝

全局安裝：

不推薦全局安裝webpack，全局安裝的webpack，在打包項目的時候，使用的是你安裝在自己電腦上的webpack，如果項目到了另一個人的電腦上，他可能安裝的上舊版本的webpack，那么就可能涉及到兼容性的問題。而且他如果沒有在全局安裝webpack就無法打包。

# 安裝最新版本
npm install --global webpack

# 或者 安裝特定版本
npm install --global webpack@<version>

如果上面安裝的是  webpack v4+ 版本, 還需要安裝 CLI , 才能使用 webpack 命令行

npm install --global webpack-cli 

可通過  npm root -g 查看全局安裝目錄

如果安裝后，命令行窗口  webpack 命令不可用，則手動配置 全局目錄的 環境變量

我的電腦 -> 右鍵屬性 -> 高級系統設置 -> 高級 -> 環境變量 -> 系統變量 -> path ->在末尾添加上面的路徑，記得前面用 ; 分號隔開

 然后再重新打開 cmd 命令行窗口，輸入  webpack -v 即可使用

全局安裝  webpack@v4.35.2 與  webpack-cli@3.3.6

npm i -g webpack@v4.35.2
npm i -g webpack-cli@3.3.6

安裝后查看版本號。如果有紅色字提醒，沒關系忽略它

webpack -v

簡單使用

新建目錄結構如下：

 在webpack-demo2目錄下執行下面代碼打包js文件

E:\vue\npm-demo\webpack-demo2>webpack ./src/main.js -o ./dist/bundle.js

 ./dist/bundle.js表示將所有的js文件打包在dist目錄下的bundle.js文件中，./src/main.js是所有js的入口文件

 webpack.config.js

每當修改js文件內容后，都要webpack重新打包，打包時要指定入口和出口比較麻煩，可通過配置解決

在  webpack-demo2 目錄下創建  webpack.config.js 配置文件，該文件與  src 處於同級目錄

在webpack.config.js里寫如下配置

// 引入node中的path模塊，處理文件路徑 的小工具
const path = require('path')

// 導出一個webpack具有特殊屬性配置的對象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模塊文件路徑 
    // 出口
    output: {
        // path: './dist/', 錯誤的，要指定絕對路徑
        path: path.join(__dirname, './dist/'), //打包的結果文件生成的目錄要是絕對路徑
        filename: 'bundle.js' 
    }
}

然后就可以執行下面的命令進行打包了，不需要再輸入入口和出口了

webpack

如果沒有mode參數，則會出現黃色警告。

本地安裝

本地安裝的時候，建議把webpack安裝到devDependencies 開發依賴 ( --save-dev ) 中，因為 webpack 只是一個打包工具，項目如果需要上線，上線的是打包的結果，而不是這個工具。

所以我們為了區分生產環境和開發環境依賴，通過  --save （生產環境）和  --save-dev （開發環境）來區分。

為了測試本地安裝，先把全局安裝的  webpack 和  webpack-cli 卸載掉

npm uninstall -g webpack
npm uninstall -g webpack-cli

在webpack-demo2中，使用npm init -y 初始化，會生成一個package.json的文件，后面要用到。

本地安裝命令

# 安裝最新版本
npm install --save-dev webpack  
# 安裝特定版本
npm install --save-dev webpack@<version>

如果上面安裝的是  webpack v4+ 版本, 還需要安裝 CLI , 才能使用 webpack 命令行

npm install --save-dev webpack-cli

# 1. 進入到 webpack-demo2
cd e:\vue\npm-demo\webpack-demo2

# 2. 初始化項目 `-y` 是采用默認配置
npm init -y

# 3. 安裝 v4.35.2 ，不要少了 v
npm i -D webpack@v4.35.2

# 安裝 CLI
npm i -D webpack-cli@3.3.6

安裝完執行webpack -v會報錯

 在本地安裝的  webpack ，要通過在項目文件夾下  package.json 文件中的  scripts 配置命令映射

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack"
  },

然后查看版本號就使用下面的命令

npm run show

運行 main.js 模塊：

npm run start

注意：如果命令映射的別名是  start ，可省略  run 進行簡寫執行，即：

npm start

打包構建

npm run build

 自動打包

前面我們修改了代碼之后，都要手動打包，這樣很浪費我們的時間，那我們想當我們修改了代碼之后能不能自動幫我們完成打包，答案當然是可以的，只需要在package.json的script里加上watch參數就可以了

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "watch": "webpack --watch"  // 加上這個就可以自動幫我們打包了
  },

添加上watch參數之后，在命令行執行npm run watch，程序會阻塞狀態，當我們更改代碼之后，自動會幫我們完成打包

導入導出模塊

上面我們的webpack-demo2下有個src文件夾，里面有兩個js文件，一個是bar.js，一個是main.js。main.js是主入口，引用了bar.js文件，既然要用到bar.js里的，那我們就要在bar.js里導出，然后再main.js里導入

導出默認成員

默認成員只能有一個，要不然會報錯。

export default 成員

bar.js

// ES6 注意 一個模塊文件中，只能導出一個默認成員，注釋掉一個
export default function() {  // 導出函數
    console.log('我是bar模塊--ES6')
}


export default { // 導出對象
    name: '鄒鄒'
}

要在main.js文件里使用bar.js文件里的內容，還要在main.js里導入

main.js

// Es6 導入默認成員
import bar from './bar'

bar()  // 調用函數


console.log(bar)
console.log(bar.name)  // 對象的屬性值

導出非默認成員

默認成員只能導出一個，非默認成員可以導出多個。

非默認成員必須要有成員名稱

bar.js

// ES6 可以導出多個非默認成員
export const x = 'xxx'
export var y = 'yyy'

export function add (a, b) {
    return a+b
}

// export z = 'zzz' 錯誤的，沒有數據類型
// export 'wwww' 錯誤的，沒有變量名和類型
// export function (x, y) { 錯誤的，沒有函數名
//     return x+y
// }

main.js

// Es6 導入非默認成員
// 通過 解構賦值 的方式 來加載成員
// x 對應的是bar.js 模塊中的 x 成員 ，y對應y成員，ad對應add成員 函數
import {x, y, add} from './bar'
console.log(x, y, add(10, 20))

// 通過解構賦值按需導入你需要的成員 
import {x, y} from './bar'
console.log(x, y)

// 會將默認成員 與 非默認成員 全部導入
import * as bar2 from './bar'
console.log(bar2, bar2.x, bar2.y, bar2.add(1,2))