從無到有構建vue實戰專案（四）
六、webpack的安裝和配置
為了快速構建vue專案，webpack是一個必不可少的工具，我們先來安裝它，附上官網地址：https://www.webpackjs.com/
要安裝最新版本或特定版本，請執行以下命令之一：
npm install --save-dev webpack npm install --save-dev webpack@<version>如果你使用 webpack 4+ 版本，你還需要安裝 CLI:
npm install --save-dev webpack-cli以下的 NPM 安裝方式，將使
webpack在全域性環境下可用：npm install --global webpack在這裡，我推薦使用全域性安裝，這樣可以避免後面使用過程中讓你意想不到的各種個問題。
接下來我們對webpack進行簡單的配置：
我們先理解四個核心概念：
- 入口(entry)
- 輸出(output)
- loader
- 外掛(plugins)
- 模式
入口(entry)
入口起點(entry point)指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。
每個依賴項隨即被處理，最後輸出到稱之為 bundles 的檔案中，我們將在下一章節詳細討論這個過程。
可以通過在 webpack 配置中配置
entry屬性，來指定一個入口起點（或多個入口起點）。預設值為./src。看一個
entry配置的最簡單例子:webpack.config.js
module.exports = { entry: './path/to/my/entry/file.js' };出口(output)
output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為
./dist。基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的資料夾中。你可以通過在配置中指定一個output欄位，來配置這些處理過程：webpack.config.js
const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } };我們通過
output.filename和output.path屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪裡。可能你想要了解在程式碼最上面匯入的 path 模組是什麼，它是一個 Node.js 核心模組，用於操作檔案路徑。loader
loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。
本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。
在 webpack 的配置中 loader 有兩個目標：
test屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些檔案。use屬性，表示進行轉換時，應該使用哪個 loader。
webpack.config.js
const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; module.exports = config;以上配置中，對一個單獨的 module 物件定義了
rules屬性，裡面包含兩個必須屬性：test和use。這告訴 webpack 編譯器(compiler) 如下資訊：“嘿，webpack 編譯器，當你碰到「在
require()/import語句中被解析為 '.txt' 的路徑」時，在你對它打包之前，先使用raw-loader轉換一下。”外掛(plugins)
loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。
想要使用一個外掛，你只需要
require()它，然後把它新增到plugins陣列中。多數外掛可以通過選項(option)自定義。你也可以在一個配置檔案中因為不同目的而多次使用同一個外掛，這時需要通過使用new操作符來建立它的一個例項。webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 用於訪問內建外掛 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config;模式
通過選擇
development或production之中的一個，來設定mode引數，你可以啟用相應模式下的 webpack 內建的優化module.exports = { mode: 'production' };
七、本專案中的webpack.config.js的基本配置和出錯情況
- 先來看我的基礎配置（最終版）：
var path = require('path') // 引入操作路徑模組
const VueLoaderPlugin = require('vue-loader/lib/plugin') //引入vue-loader
module.exports = {
mode: 'development',
// 輸入檔案
entry: './src/main.js',
output: {
// 輸出目錄
path: path.resolve(__dirname, 'dist'),
// 靜態目錄,從這裡取檔案
publicPath: '/dist/',
// 檔名
filename: 'index.js'
},
module: {
rules: [
//解析vue字尾檔案
{
test: /\.vue$/,
loader: 'vue-loader'
},
//用巴babel解析js檔案 排除模組安裝目錄的檔案
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
},
include: '/src',
exclude:'/node_modules/'
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
]
},
plugins: [
// 請確保引入這個外掛！
new VueLoaderPlugin()
]
}然後在以上配置過程中，出現了一系列的問題：
出現這個錯誤是因為每個 vue 包的新版本釋出時，一個相應版本的 vue-template-compiler 也會隨之釋出。編譯器的版本必須和基本的 vue 包保持同步，這樣 vue-loader 就會生成相容執行時的程式碼。這意味著你每次升級專案中的 vue 包時，也應該匹配升級 vue-template-compiler。
你應該將 vue-loader 和 vue-template-compiler 一起安裝——除非你是使用自行 fork 版本的 Vue 模板編譯器的高階使用者：
npm install -D vue-loader vue-template-compiler然後在webpack.config.js中分別寫入：
const VueLoaderPlugin = require('vue-loader/lib/plugin')module: {
...
plugins: [
// 請確保引入這個外掛！
new VueLoaderPlugin()
]
}
很明顯，該錯誤是由element-ui引起的，解決這個問題我們只需要插入這樣一段語句：
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}