一: 热跟新
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] '
}
}]
}
]
占位符: