1、現狀
繼上次完成Vue.js實戰——架構搭建_2，發現自動生成的架構配置（包括編譯、打包、調試相關的）檔案過多（見下圖所示），既分散也不好了解，是以當時也沒有去解讀各個配置的含義。
今天就來精簡Vue.js項目使用的webpack配置，使之簡單易懂，降低出錯的成本。
2、目标
把webpack配置檔案精簡成一個單獨的檔案，去掉備援且不太使用的配置，讓大夥能夠享受架構搭建的簡約之美。
3、優化過程
3.1 多個配置檔案優化成1個配置檔案
- 重新建立一個geolocation_2項目檔案夾，我們僅需要geolocation_1中的業務内容頁面（根路徑下的index.html檔案以及src下的所有内容）。
- 按照下述目錄結構對代碼進行整理（參考了網友整理的目錄結構）：
|app
|--webpack.config.js //webpack入口配置
|--package.json //依賴json（基本上不需要管，隻有額外引庫時，可手動修改此問檔案引入，也可shell中執行npm指令引入）
|--|--dist //打包之後根目錄，我們不用管
|--|--src //源碼
|--|--|--commons //非業務的核心公共元件（基礎）
|--|--|--components //業務相關的元件（可引用commons的元件）
|--|--|--js //頁面或者業務相關的js（非js庫）
|--|--|--lib //js庫（部分js庫元件可能會包含Vue檔案）
|--|--|--pages //多頁面，包括html頁面，vue頁面
|--|--|--assets //靜态資源，如圖檔等
對應此項目geolocation_2的目錄結構為：
3. 架構搭建階段，最重要的是要把基礎配置搞好，本人配置的webpack.config.js如下：
const path = require("path"); //node路徑處理子產品
const webpack = require('webpack'); //webpack必要條件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //多頁面生成視圖插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除工程目錄插件
const CompressionPlugin = require('compression-webpack-plugin'); //壓縮插件
module.exports = {
//對象形式entry
entry: {
index: './src/js/main.js', //vue檔案綁定的js檔案，有多個寫多個
},
output: {
path: path.resolve(__dirname, './dist'), //打包之後工程根目錄
publicPath: '/static/', //html資源對應的server目錄
filename: '[name].[hash].js', //每個頁面對應的js檔案
},
module: {
rules: [{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"]
},
{
test: /\.vue$/, //.vue檔案處理
loader: 'vue-loader',
options: {
loaders: {}
}
},
{
test: /\.js$/, //es6轉es5處理
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]"
}
},
{
test: /\.html$/, //html打包，可有可無
loader: 'html-loader',
options: {}
}
]
},
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js"
},
extensions: ["*", ".js", ".vue", ".json"]
},
plugins: [
new CleanWebpackPlugin(["dist"]), //建構dist之前清除老版目錄
new HtmlWebpackPlugin({ //一個html檔案，有多個複寫多個HtmlWebpackPlugin
filename: "index.html",
template: "./src/pages/index.html",
inject: true,
chunks: ["index"]
}),
],
devServer: { //開發模式下使用的配置參數
historyApiFallback: true,
noInfo: true,
overlay: true,
contentBase: path.resolve(__dirname, "./src/assets") //本地調試時，圖檔等資源對應的根路徑
},
devtool: "#eval-source-map"
};
if (process.env.NODE_ENV === "production") { //生産環境，啟用相容和js壓縮處理
module.exports.devtool = "#source-map";
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$/,
threshold: 1024,
minRatio: 0.8,
})
]);
};
//DEV模式時，指定公共路徑為目前路徑
if (process.env.PLATFORM == "DEV") {
module.exports.output.publicPath = "";
}
4. package.json檔案配置如下（預設dependencies下什麼依賴也不加，隻在devDependencies上加上如下配置，這樣可以做到業務元件和vue本身依賴的基礎元件的分離，同時有效控制項目最後打出的檔案的大小）：
{
"name": "justinsoft",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "[email protected]",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development PLATFORM=DEV webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"compression-webpack-plugin": "^1.1.12",
"cross-env": "^5.0.5",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"vue": "^2.5.11",
"vue-html-loader": "^1.2.4",
"vue-i18n": "^8.0.0",
"vue-loader": "^13.7.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.11",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.9.1",
"babel-preset-es2015": "^6.24.1"
}
}
5. 指令行進入geolocation_2目錄，通過執行shell指令編譯指令：npm run build，會出現“Unexpected token: punc (() ”報錯，原因是因為需要相容ES5文法，解決方案是：在目前根路徑下建立一個.babelrc檔案，内容如下：
{
"presets": ["es2015"]
}
6. 按照步驟5解決所有的元件報錯依賴問題。如果有什麼問題解決不了，可以在網上搜下報錯的解決方案，也歡迎留言交流。
7. 完成上述步驟後，需要相應的調整vue/js檔案中互相引用的路徑錯誤問題，此處我就不一一講解了。大家可以從這裡檢視修改好了之後的Demo源碼。
3.2 解決Dev模式下本地相對圖檔路徑無法識别的問題
在根路徑下執行npm run dev時，會動态生成一個html檔案和相對引用路徑，如上圖webpack.config.js中的publicPath路徑為："/static/"。但是在開發模式下，我們圖檔的相對路徑無法加上該虛拟路徑，是以：
1）要在devServer中明确指定圖檔資源的相對路徑（見webpack.config.js中的contentBase參數配置）；
2）要把dev的publicPath重置為目前的根路徑（見webpack.config.js最後一段配置，注意目前根路徑是""，而不是"./")
3.3 按照新架構重新釋出Demo
1. 大家可以從這裡下載下傳github管理的Vue.js實戰——精簡webpack配置_3源碼。
2.運作npm run dev後的效果圖如下：
4、總結
1. 從頭開始搭建一個項目的基礎架構，特别勞神費力，但是對于初學者尤為重要，因為這樣會培養對架構整體的認知，大體掌握平台架構和各個元件搭配的方方面面，然後可以再深入一一學習，各個擊破；
2.後續我會基于此精簡的架構，進一步講解如何通過前端程式設計來實作多媒體互動功能、元件抽象以及與各大平台對接方面的經驗，隻為初心。
上一篇：Vue.js實戰——架構搭建_2 下一篇：Vue.js實戰——擷取浏覽器經緯度的各種坑_4
6、參考資料：
[1]https://blog.csdn.net/wbiokr/article/details/77170792
[2]https://blog.csdn.net/wbiokr/article/details/77171010
[3]https://www.cnblogs.com/toward-the-sun/p/6147324.html?utm_source=itdadao&utm_medium=referral
[4]https://segmentfault.com/a/1190000012383015
[5]https://www.cnblogs.com/zourong/p/5943224.html
[6]https://blog.csdn.net/goodboy1739/article/details/78547042?locationNum=7&fps=1