20181204——vue-cli#2.0 webpack 配置分析
前言
作為 Vue 的使用者我們對於 vue-cli 都很熟悉，但是對它的 webpack 配置我們可能關注甚少，今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分析
vue-cli 的簡介、安裝我們不在這裡贅述，對它還不熟悉的同學可以直接訪問 vue-cli 檢視
目錄結構
.
├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static
build - 編譯任務的程式碼
config - webpack 的配置檔案
package.json - 專案的基本資訊
入口
從 package.json 中我們可以看到
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
}
當我們執行 npm run dev / npm run build 時執行的是 node build/dev-server.js 或 node build/build.js
dev-server.js
讓我們先從 build/dev-server.js 入手
20181205 **來個demo理解下** hello.js
console.log("hello~~")
app.js
console.log("hello app");
require("./hello.js")
app.js中匯入了hello.js，它們之間有匯入關係。我們假如直接將app.js放到html中是會報錯的。
如果我們要維持這種關係我們就必須使用打包工具進行打包。在命令列中輸入：
// 安裝webpack $ npm install webpack -g // 打包app.js $ webpack app.js bundle.js
然後我們會發現專案中多了一個bundle.js檔案，我們在html中匯入這個js檔案。
index.html
<!DOCTYPE html>
<html>
<head>
<title>demo01</title>
</head>
<body>
<h1>demo01</h1>
<script src="bundle.js"></script>
</body>
</html>
webpack.config.js
webpack.config.js檔案是webpack的預設配置檔案。之前我們使用命令列$ webpack entry.js output.js來實現打包，其實webpack可以有更多的打包配置，這些配置都是在webpack.config.js中完成的。下面是一個簡單的webpack.config.js。
const webpack = require("webpack")
module.exports = {
entry: {
entry: "./app/entry.js",
},
output:
{
path: __dirname + "/dist",
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
]
}
}
entry是配置webpack的入口檔案，上面的程式碼中我們將app目錄下的entry.js作為入口檔案。webpack會將與entry.js有關的資源都進行打包。
output是出口檔案，即打包好的檔案的存放地址和檔名。
oader是webpack的載入器，可以幫我們處理各種非js檔案。如css樣式，vue、jsx、weex等字尾的程式碼，JPG、PNG圖片等。所以我們一般會在package.json中看到各種***-loader。這些就是各類資源的loader載入器。
在module的loaders陣列中可以有多個物件，每個物件就是一個載入器。下面是babel-loader的最簡單配置方式
使用babel來轉譯ES6程式碼
下面我們來一步步使用babel-loader將ES6語法用於專案中。
webpack打包的檔案預設是不支援ES6的，我們需要用babel轉譯。
分析vue-cli
說了這麼多，我的最終目的還是為了學習Vue.js。所以在對webpack有了一定的理解之後，就發現其實vue-cli並不是那麼深不可測。
build —— 專案構建資料夾
build.js —— 打包構建指令碼（npm run build）
check-versions.js —— npm和node版本的查詢
dev-client.js ——
dev-server.js —— 開發除錯指令碼（npm run dev）
utils.js —— 工具類
webpack.base.config.js —— Webpack配置檔案
webpack.dev.config.js —— 開發版本Webpack配置檔案，與webpack.base.config.js合併成完整的配置檔案。
webpack.prod.config.js —— 生產版本Webpack配置檔案，與webpack.base.config.js合併成完整的配置檔案。
config —— 配置資料夾，儲存有各種配置引數（檔案路徑、伺服器埠、功能開關）
src —— 程式碼資料夾
static
.gitkeep —— 作用是將檔案所在資料夾保留在git版本控制中。檔案型別和.gitignore差不多。
.babelrc —— babel配置檔案
.editorconfig —— 編輯配置，確保使用各種編輯器時能有相同的編輯格式。
.gitignore —— git忽略檔案
index.html —— 頁面，最終顯示在這個html中
package.json —— npm配置檔案，包含了專案的資訊、指令碼、依賴庫等重要資訊