系列:
webpack入門——了解及使用
webpack進階——緩存與獨立打包
文件目錄:
-- /node_modules:依賴的各種模塊
-- /src
– index.js
– print.js
– style.css
– package.json:配置npm相關設置
– webpack.config.js:配置webpack
package.json腳本(輸入npm run xxx,xxx為腳本中對應命令,將會在命令行中執行相應操作):
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", // webpack打包
"watch": "webpack --watch", // webpack監聽模式
"start": "webpack-dev-server --open" // 自動刷新
}
webpack.config.js:
(這是一個我們已經配置好的webpack配置js,本文中的講解都將基于該文件,會在本文件上多多少少做一些改變以供測試。)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'inline-source-map',
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
HtmlWebpackPlugin
由webpack.config.js可知,webpack打包后生成的是若干個js文件,但是最終這些js文件都是應用在html中的。
假如打包后的文件只有app.js,那么完全可以手動創建一個html,并加入<script type="text/javascript" src="app.js">,html就可以應用該打包后的文件。
但是如果我們打包的文件不止一個,或者打包后的文件包含hash值,那么每次我們都需要添加script或者說每次都需要更改文件的hash值嗎?當然可以,但是這樣很麻煩,開發效率很低。
所以我們就引入了HtmlWebpackPlugin插件,這樣就可以自動生成html模版并且自動添加script。
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ // 已添加該插件
title: 'Output Management'
})
]
現在我們進行wepack打包:
生成目錄:
-- /dist
– app.js
– common.js
– print.js
– index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="common.js"></script><script type="text/javascript" src="app.js"></script><script type="text/javascript" src="print.js"></script></body>
</html>
更多配置:HTML Webpack Plugin
CleanWebpackPlugin
該插件的主要作用是清除前次打包文件。
沒有hash時,這個插件體現不出來效果,我我們在以上的webpack配置中做點小的變動:
// 給輸出文件名上加上hash
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
// 注釋掉CleanWebpackPlugin
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
// new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
然后再次打包,可以看見dist文件夾中:
現在我們只需要hash后的文件給html使用,但是這里卻任然保留著很多上一次打包留下來的東西。
這個時候我們把CleanWebpackPlugin取注釋,然后再次打包。
可以看見上次文件夾里的垃圾都沒有了,只留下了現在需要的文件。
故CleanWebpackPlugin的效果是在打包前,刪除指定的曾經打包的文件夾,然再新建并把最新打包好的內容放在dist文件夾里。
參數為文件夾字符串數組,更多配置:Clean Webpack Plugin
webpack-dev-server
webpack有一個功能叫做監聽,使用方法:命令行中輸入 webpack --watch。
這樣啟動webpack之后,每當我們在源文件中發生了改變,都會進行重新打包,這樣提高了生產效率,雖然重新打包了,但是我們必須刷新頁面才能看見更變。
這樣是不友好的,如果能夠自己刷新頁面那就極好了,這也就是webpack-dev-server的作用,啟動一個小型server達到實時刷新的效果。
使用方法:
sudo npm install webpack-dev-server --save-dev
## 然后啟動的時候,就
webpack-dev-server --open
## 運行參數可以用以下查看
webpack-dev-server -help
## 常用的有 編譯刷新的時候出現顏色和進程條
webpack-dev-server --progress --colors
我們將該腳本寫入了package.json中,可以快捷啟動 npm run start。
Hot Module Replace
熱替換常常和webpack-dev-server同時使用,所謂熱替換(HMR: Hot Module Replace)描述的是運行中的一個系統,我要更換其中部分內容,而仍然要保持不替換的內容繼續工作,并在替換后,替換部分能夠立即生效。
可能到這里大家還不是很明白熱替換的具體作用,簡單來說就是部分刷新。
假如我們僅僅只使用webpack-dev-server,然后在index.js 引入了 style.css。 那么我們修改一下style.css的樣式,webpack-dev-server會監聽到源文件發生了變化,然后重新進行webpack打包,然后再刷新頁面,可能到這里已經滿足了很多人的需求。但是我現在有了一個新的需求,我頁面上有一個input,我在input中輸入了一系列文字,現在我希望,我更改了樣式,input中的文字仍然保持不變,只有修改的樣式發生改變。我們知道webpack-dev-server在源文件發生改變后,會刷新整個頁面,一旦刷新的整個頁面,那么input中的文字必當消失。 這個時候就是體現熱替換強大功能的時候了,使用了熱替換,就可以僅僅只更改樣式而保持input中的值不發生改變。
使用方法:
- 在命令行中直接使用:
webpack-dev-server --hot
- 將啟動配置寫入webpack.config.js中,首先在插件數組中添加該插件:
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(), // 在實例webpack.config.js中已添加
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
這之后我們將進行webpack-dev-server的配置,
devServer: {
hot: true, // hot為true則代表啟動了熱替換服務
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
進行配置之后,我們直接啟動npm run start腳本既可(webpack-dev-server --open)。
由本例我們知道了devServer是關于webpack-dev-server的配置,我們來看看常用參數:
- port:8080(Number,訪問端口),從localhost:8080訪問服務器
- hot:是否開啟熱替換模式
- contentBase:簡單來說就是提供靜態資源文件的目錄,如果我們沒有使用HtmlWebpackPlugin的,而是手動的添加了index.html,那么這個時候index.html在哪個目錄下,contentBase就需要寫哪個目錄。這里一定要寫絕對路徑。因為這個路徑是基于本機的,如果寫相對路徑則是相對于本機的根路徑的。
- publicPath:開發模式中,打包的文件在該目錄下,而不是在output中制定的文件夾下。并且路徑是相對于當前目錄的,以'/'開頭。例如:publicPath: '/public/',則應該通localhost:8080/public/來訪問打包的文件,例如我要訪問common.js,那么就是localhost:8080/public/common.js。使用該路徑時,通常都不會自己手寫index.html,這樣會造成訪問混亂,直接使用HtmlWebpackPlugin生成HTML。
更多配置:Webpack Dev Server
source map
首先我們先在本例的webpack配置上做出一些修改:
// devtool: 'inline-source-map' // 注釋掉source-map
之后我們運行npm run start,這個時候我們的項目應該正常進入了開發模式中。進入print.js文件:
import _ from 'lodash';
export default function printMe() {
console.log(_.join(['qq', 'bb'], ' '));
}
這個時候我們把console改成consol然后保存,在頁面上觸發這個printMe函數,發現控制臺上:
我們知道錯誤明明出現在print.js中,但是由于是app.js引用了print.js,所以報錯還是在app.js上,這樣以后我們出現了錯誤很難定位出錯的位置,導致難以調試,現在我們吧
// devtool: 'inline-source-map'
解注,然后重新執行npm run start。再次觸發printMe這個函數:
然后我們可以看見,清楚的定位了出錯的是在print.js第四行,這就是source map的作用,用于錯誤定位。但是在生產環境中,我們一般都是經過調試好的文件,所以在生產環境中不需要這個source map。
相關信息查看:開發輔助調試工具(Devtool)
參考資料:
開發中 Server
Webpack dev server
webpack-dev-server 使用總結
Webpack使用教程三(webpack-dev-server)
本文將持續更新。。。。