從0開始搭建vue+webpack腳手架（二）

接着從0開始搭建vue+webpack腳手架（一）

3、配置webpack-dev-server

　　1. webpack-dev-server自帶一個node的服務器， 項目在服務端運行的同時能夠實現熱更新加載

　　2. 安裝兼容環境變量的包 cross-env

　　（1）緣由： 構建項目時分生產環境和開發環境，此時webpack須要配置production和development模式，須要使用一個變量來做條件判斷，而不一樣的平臺上設置環境變量方式不一樣，在Mac平臺是 NODE_ENV=production 而windows平臺上是set NODE_ENV=production,，因此須要使用cross-env

　　（2）安裝 

1 $ npm i -D cross-env

　　（3）將package.json運行腳本改成以下：

1 "scripts": {
2    "test": "echo \"Error: no test specified\" && exit 1",
3    "build": "cross-env NODE_ENV=production webpack --progress --colors",
4    "dev": "cross-env NODE_ENV=development webpack-dev-server --colors --modules --progress"
5 },

　　（4）在webpack.config.js添加判斷代碼

 1 const path = require('path')
 2 const webpack = require('webpack')
 3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 4 const htmlWebpackPlugin = require('html-webpack-plugin')
 5 const cleanWebpackPlugin = require('clean-webpack-plugin')
 6 
 7 // 啓動腳本設置的變量都存在process.env對象中
 8 const isDev = process.env.NODE_ENV === 'development'
 9 
10 const config = {
11   target: 'web',  // 設置運行環境爲web瀏覽器端
12   performance: {...},
13   entry: path.join(__dirname, 'src/index.js'),
14   output: {...},
15   module: {...},
16   plugins: [
17     new VueLoaderPlugin(),
18     new cleanWebpackPlugin(['dist']),
19     // 根據不一樣環境區分打包
20     new webpack.DefinePlugin({
21       'process.env': {
22         NODE_ENV: isDev ? '"development"' : '"production"',
23       }
24     }),
25     new htmlWebpackPlugin({
26       template: path.join(__dirname, 'src/index.html')
27     })
28   ]
29 }
30 
31 if (isDev) {
32   config.devServer = {
33     port: 9000,
34     host: '0.0.0.0',
35     overlay: {
36       errors: true // 編譯時在網頁顯示錯誤
37     }
38   }
39 }
40 
41 module.exports = config

將本來的配置選項使用config變量保存， 而後就能夠在內部增長不一樣條件的配置選項。

首先定義isDev的默認值是 'development'，當運行腳本 $npm run dev 時環境變量NODE_ENV的值是'development'， isDev則爲ture就會運行if (isDev分支)

其次在 webpack.DefinePlugin插件中定義變量NODE_ENV的值爲兩種狀況 

運行項目，警告以下

只要在腳本中分別添加 --mode='development'和--mode='production' 或在config中分別添加 mode: 'development'和mode: 'production'便可

　　3. 繼續添加devServer的配置項

 1 config.devServer = {
 2     port: 9000,
 3     host: '0.0.0.0',
 4     overlay: {
 5       errors: true // 編譯時在網頁顯示錯誤
 6     },
 7     historyApiFallback: true,
 8     hot: true,
 9   }
10   config.plugins.push(
11     new webpack.HotModuleReplacementPlugin()
12   )
13　　// config.devtool = '#cheap-module-eval-source-map'　　
14 }

　　hiistoryApiFallback: true表示任何的404頁面都會跳轉到入口頁面index.html

　　hot: true開啓了熱更新模塊 , 當未開始時，局部數據改變會致使整個頁面刷新，當開啓時須要配合插件HotModuleReplacementPlugin使用，不然將會顯示空白頁面。

　　此時運行項目並更改局部數據，便可看到未刷新狀態下數據更新的效果 

　　注意， 如修改.vue文件中的style樣式時不能啓動熱更新，則須要在以前的rules中將 style-loader 改成 vue-style-loader (先安裝)。

　　

　　4. 配置devtool選項

　　　　（1）devtool選項生成source map代碼，有助於錯誤定位，可配合瀏覽器端的Devtools插件使用

　　　　（2）在webpack4.x中可使用webpack.SourceMapDevToolPlugin替代，其選項更多， 但切記二者不能同時使用。

　　　　（3）在配置devtool後， 可能會有以下警告, 發現以前200多kb的bundle.js文件居然增長到1.49M，這是因爲增長了source map代碼的緣由，將devtool: false或者不配置便可。通常狀況，在開發環境能夠配置devtool，但在生產環境若是配置devtool則會增大文件，極大下降加載性能。

 

4、支持ES6，JSX語法

　　（1）安裝相關依賴和loader

1 $ npm i -D babel-core babel-loader babel-preset-env babel-plugin-transform-vue-jsx

　　（2）根目錄下建立配置文件.babelrc

1 {
2   "presets": [
3     "env"
4   ],
5   "plugins": [
6     "transform-vue-jsx"
7   ]
8 }

　　 　　1. babel-preset-env ： 能夠根據不用的環境對ES6進行轉碼

　　 　　2. babel-core babel-loader ： 配合webpack編譯ES6語法

　　 　　3. babel-plugin-transform-vue-jsx ： 能夠轉換vue中的jsx代碼（不是必須的，如使用JSX時再配置）, 安裝時提示依賴於babel-helper-vue-jsx-merge-props和babel-plugin-syntax-jsx, 將其安裝便可

　　 （3） 將babel-loader 配置添加到webpack.config.js中的rules

1 {
2      test: /\.jsx?$/,
3      loader: "babel-loader"
4 },

 在src目錄下建立一個測試文件 test.jsx

 1 export default {
 2   render() {
 3     let styObj = {
 4       fontSize: '22px',
 5       border: '1px solid #333'
 6     }
 7     return (
 8       <div style={[{color: '#f60'}, styObj]}>這是JSX語法的測試</div>
 9     )
10   }
11 }

將測試組件引用到App.vue組件中 ,

 1 <template>
 2   <div class="app">
 3     <div class="cover"></div>
 4     <test></test>
 5   </div>
 6 </template>
 7 
 8 <script>
 9   import Test from './components/test.jsx'
10   export default {
11     name: 'App',
12     data() {
13       return {}
14     },
15     components: {
16       Test
17     }
18   }
19 </script>

運行項目能夠看到樣式正常載入

 

5、配置autoprefixer

　　（1）安裝相關依賴和loader

1 $ npm i -D postcss-loader autoprefixer

　　（2）根目錄下建立配置文件postcss.config.js

1 const autoprefixer = require('autoprefixer')
2 
3 // 在使用postcss後處理CSS時使用autoprefixer添加瀏覽器內核前綴-webkit-
4 module.exports = {
5   plugins: [
6     autoprefixer()
7   ]
8 }

　　（3）添加postcss-loader到webpack.config.js的stylus的rules中

 1 {
 2         test: /\.css$/,
 3         use: ['style-loader', 'css-loader']
 4       },
 5       {
 6         test: /\.styl(us)?$/,
 7         use: [
 8           'style-loader',
 9           'css-loader',
10           {
11             loader: "postcss-loader",
12             options: {
13               sourceMap: true
14               //設置爲true表示使用stylus-loader中的sourceMap而再也不單獨生成
15             }
16           },
17           'stylus-loader',
18         ]
19       },

 

至此， 項目正常運行。能夠在src目錄下建立不一樣vue組件並編輯代碼