contenthash作用
通过使用contenthash,可以做到重新打包代码上线的时候,用户只需要更新有变化的代码,而没有变化的代码,用户可以直接使用本地的缓存
contenthash功能
源代码发生变化,contenthash则发生变化
源代码不变,contenthash不变
配置
配置代码
webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
main: './src/index.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}, {
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
}, {
test: /\.(eot|ttf|svg|woff|woff2)$/,
use: {
loader: 'file-loader'
}
}]
},
output: {
path: path.resolve(__dirname, '../dist')
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin()
],
optimization: {
usedExports: true,
splitChunks: {
chunks: "all",
cacheGroups: {//当打包同步代码时,上面的参数生效
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
filename: 'vendors.[contenthash].js'
}
}
}
},
performance: false
}
webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common');
const devConfig = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: './dist',
port: 8080,
hot: true, //开启 Hot Module Replacement 功能
},
module: {
rules: [ {
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
}
},
'sass-loader',
'postcss-loader'
]
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].js',
chunkFilename: '[name].js'
}
}
module.exports = merge(commonConfig, devConfig);
webpack.prod.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const prodConfig = {
mode: 'production',
devtool: 'cheap-module-source-map',
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
//如果一个文件即将被直接引用,那么使用filename的规则
chunkFilename: '[name].chunk.css'
//如果是间接引用CSS内容,那么使用chunkFilename的规则
})
],
module: {
rules: [ {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
}
},
'sass-loader',
'postcss-loader'
]
}, {
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}]
},
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
},
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].chunk.js'
}
}
module.exports = merge(commonConfig, prodConfig);