本章內容包含上一章思考的解決，還有一些其它的定制...

CSS預處理

關于對.vue文件模塊處理規則的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟蹤；

而loaders的關鍵在于build/vue-loader.conf.js文件中對utils.cssLoaders的調用：

...
module.exports = {loaders: utils.cssLoaders({sourceMap: sourceMapEnabled,extract: isProduction}),
...

說了這么一堆，我想表達啥呢？

因為個人在項目中，習慣用scss編寫樣式，跟蹤以上文件發現，針對.vue文件的預處理loaders中已經包含對scss的處理：

//utils.js文件exports.cssLoaders = function (options) {options = options || {}
...return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')}
}

這樣，是不是可以直接使用scss了呢？

恭喜你，會報錯...

查找發現，package.json中并沒有關于sass-loader的依賴，所以，我們需要安裝sass-loader、node-sassNPM包：npm i -D sass-loader、npm i -D node-sass。

測試可行性

安裝完成后，在src/components/HelloWorld.vue文件中進行測試：

局域網訪問

默認情況下，初始化的環境是不允許局域網訪問的，如果想局域網訪問的話，跟蹤路徑build/webpack.dev.conf.js（為什么跟蹤這個文件呢？）可以發現：

devServer: {clientLogLevel: 'warning',
...host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser,
...

這里指定了host字段，而HOST值在該文件可查找到const HOST = process.env.HOST，也就是說，如果想要局域網內訪問，有兩種解決方案：

1. 在命令行中配置--host 0.0.0.0，即在/package.json的scripts中修改 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",；
2. 在config/index.js中:

module.exports = {dev: {
...host: 'localhost', // can be overwritten by process.env.HOSTport: 8080,
...

修改host: 'localhost',為host: '0.0.0.0',，即可；

推薦使用配置文件修改，即：第二種。

至于，為什么跟蹤build/webpack.dev.conf.js文件？

因為這個功能是開發環境下獨有的，要修改開發環境吖，必然找開發環境的配置文件進行跟蹤。

注意：

• 修改本地服務器配置，要重啟本地服務器（在命令行中Ctrl + c，然后npm run dev即可）才可應用新的配置。

測試可行性：

重啟項目后，在瀏覽器中輸入http://192.168.1.106:8080/#/（192.168.1.106是你本地IP，可通過ipconfig /all查看）能夠訪問，就說明局域網內的其他端可以訪問。

不信？你試試手機。

打包文件路徑

如果，你想和其它朋友分享你的成果，部署到服務器上或直接打包發給朋友，通過npm run build即可生成靜態資源dist/。

然而，打開dist/index.html，發現是空白頁，控制臺還報錯（資源找不到），人生失去了希望...

這是因為webpack生產配置文件output.publicPath配置有問題，跟蹤文件build/webpack.base.conf.js->build/webpack.prod.conf.js。

很好，我們在build/webpack.base.conf.js中就發現了：

  output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},

跟蹤config.build.assetsPublicPath找到config/index.js，修改：

  build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/', //將assetsPublicPath的值修改為'./'

為什么這樣修改呢？

這是因為打包文件引用所在地址的組成規則為output.publicPath + filename。

---

然而，這樣并沒有結束。

如果在樣式中引入圖片，會報圖片路徑錯誤，引用地址static/css/static/css/img/XXX.png；

需要修改build/utils.js：

   if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})} else {return ['vue-style-loader'].concat(loaders)}

webpack打包要區分兩個路徑：

1. 打包路徑（文件存儲位置：output.path + [filename | name]）
2. 引用路徑（文件互相引用的位置：output.publicname + [filename | name]）

ES6+

目前還不能結束...

目前ES6的語法成為了主流，如果你在項目中使用了ES6，在一些較舊的瀏覽器中，呵呵...

像Object.assign、Array.from...方法無法使用，程序報錯。

怎么辦呢？

npm i -S babel-polyfill安裝polyfill，它會為ES2015+添加的新的API作兼容為低版本瀏覽器可用，俗稱“墊片”。

需要將polyfill打包到生產包中，即build/webpack.base.conf.js文件中：

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js' //需要修改為app: ['babel-polyfill','./src/main.js']},

章節回顧

• 還記得如何預處理scss么，那如果使用Less呢？
• 還記得如何局域網訪問么，那如果想修改端口呢？
• 還記得如何打包部署么，可能會出現什么問題？
• 還記得如何考慮舊版本瀏覽器兼容么？

思考

• 項目結構怎么搭建呢？
• 頁面結構怎么布局呢？
• 哪些組件可以分離出來呢？
• 哪些工具單元可以分離出來呢？