webpack熱跟新和文件指紋

一： 熱跟新

1 watch 文件監聽(非熱跟新)

watch文件監聽是需要手動的刷新瀏覽器。頁面才能刷新內容。因爲他是輪詢文件的最後修改時間是否變化，當文件發生變化時，不會立刻告訴監聽者，而是先緩存起來等待aggregateTimeout

	//默認false，不開啓
	watch: true,
	// 只有開啓監聽模式，wacthOptions纔有效
	watchOptions: {
			// 默認爲空，不監聽的文件或者文件夾
			ignored: '/node_modules',
			// 監聽到發生變化後300MS去執行，摸摸人300MS
			aggregateTime: 300,
			// 判斷文件是否發生變化是通過不斷輪詢文件是否有變化，默認每秒1000次
			poll: 1000
	}

2 webpack-dev-server (熱跟新)

WDS 不輸出⽂件，⽽是放在內存中,WDS 不輸出⽂件，⽽是放在內存中,使⽤ HotModuleReplacementPlugin插件(webpack4+ 內置)

plugins: [
	new webpack.HotModuleReplacementPlugin()
],
devserver:{
	host:'localhost',  
    port:1573, 
    open:true, 
	contentBase: './dist',
	hot: true
}

3 webpack-dev-middleware(熱跟新)

WDM 將 webpack 輸出的⽂件傳輸給服務器,適⽤於靈活的定製場景

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-devmiddleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
	publicPath: config.output.publicPath
}));
app.listen(3000, function () {
	console.log('Example app listening on port 3000!\n');
});

二: 文件指紋

生成：
Hash：和整個項⽬的構建相關，只要項⽬⽂件有修改，整個項⽬構建的 hash 值就會更改
Chunkhash：和 webpack 打包的 chunk 有關，不同的 entry 會⽣成不同的 chunkhash 值
Contenthash：根據⽂件內容來定義 hash ，⽂件內容不變，則 contenthash 不變

JS的文件指紋

output: {
	filename: '[name][chunkhash:8].js',
}

CSS的文件指紋

設置 MiniCssExtractPlugin 的 filename，使⽤ [contenthash]

這個插件跟style-loader衝突，因爲rules裏面的css的style-loader是把css注入到header裏面，所以不要style-loader

rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, css-loader]
	}
]
plugins: [
	 new MiniCssExtractPlugin({ 
	filename: `[name][contenthash:8].css
	});
]

圖⽚的⽂件指紋設置

rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
	loader: 'file-loader’,
	options: {
		name: 'img/[name][hash:8].[ext] '
	}
	}]
	}
]

佔位符：