六、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'
}