第三節課: webpack-dev-server的配置和使用
webpack是什么?它是一個webpack的包,前兩節使用的webpack,是生產環境使用的,而我們想要在開發環境中使用webpack,就要用到webpack-dev-server。首先我們安裝這個包
```
npm i webpack-dev-server -D
```
安裝好之后在package.json文件中增加dev配置項
```
"scripts": {
"test": "test",
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
}
```
添加完之后我們還需要去修改一些webpack的配置,來專門適應webpack-dev-server很好的工作于開發模式
1.增加target配置項,值為web,因為我們開發的 是web平臺,代碼跑在瀏覽器中的,所以我們的編譯目標是web平臺
```
module.exports = {
target: 'web'
}
```
2. 在文件后面需要判斷 當前是開發環境還是生產環境。因為我們的配置文件是要同時用在開發環境和生產環境中的,所以這里的配置需要根據不同的環境來做出一些調整。這個環境如何進行判斷呢?我們可以在執行npm腳本時(也就是package.json文件中scripts配置項里面的屬性即為可以執行的腳本)添加變量來標識現在處于開發環境還是生產環境。這個變量的設置需要一個包,這個包叫做:cross-env
```
npm i cross-env
```
cross-env的作用是:在不同平臺上面設置環境變量的方式是不一樣的
MAC:NODE_ENV=production
Windows :set NODE_ENV=production
我們不想為不同的平臺來寫多種不一樣的代碼,所以就使用cross-env來屏蔽這個問題
cross-env NODE_ENV=production
這樣就可以寫一個命令運行在任何平臺上面了。
"scripts": {
"test": "test",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}
此時我們就可以在webpack.config.js文件中進行判斷了
首先申明一個變量:
const isDev = process.env.NODE_ENV === 'development'
我們在package.json文件中設置的那些啟動腳本時的環境變量都被存放在process.env這個對象中,所以可以使用process.env.NODE_ENV來判斷當前啟動的是哪個腳本。此時,我們只需要判斷isDev這個變量是true還是false即可。
如果是開發環境我們需要修改一些webpack的配置,所有改動文件結構將module.exports 改為const config,然后在文件末尾module.exports = config將config導出。這樣就可以通過config對象修改配置文件了。
if (isDev) {
// webpack2 才加入了devServer對象
// webpack1的時候沒有一個專門的配置,很多的配置都是需要自行判斷自行加入,webpack2之后將webpack-dev-server的所有配置都放到了devServer這個對象里面
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true
}
}
}
module.exports = config
到此開發環境的服務器也已經配置完畢,但是還不能啟動,因為現在整個項目打包之后只有js文件和圖片,還沒有一個html文件去容納這些資源,那需要怎么做一個html文件去自動容納我們的靜態資源呢,在webpack中有一個html-webpack-plugin插件
cpm i html-webpack-plugin -D
然后再webpack配置文件中的config對象上添加plugins屬性,它的值是一個數組,可以存放多個插件,引入上面安裝的插件也非常簡單 new HTMLPlugin()即可。但是還必須要用到一個webpack內置的插件就是DefinePlugin,整體代碼如下:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
為什么需要definePlugin插件呢?
作用:
1. webpack在編譯的過程當中以及我們在頁面上字節寫js代碼的時候,都可以去調用這個環境變量來判斷當前所處的環境
2. 現在vue、react等框架他們都會根據不同的環境進行區分打包。vue的dask目錄中有非常多的不同版本的vue源代碼,在開發環境中它是一個比較大的版本,里面會包含很多錯誤
信息的提示以及其他很多功能,但是這些功能在生產環境中是完全沒有必要要的,因為它不但增加了文件的大小,并且還會讓整個代碼的運行效率降低很多,所以我們需要區分。
為什么要加"雙引號"呢?
因為: process.env.NODE_ENV = development 這不就報錯了嘛
npm run dev 完美啟動并且內看到頁面了