[英]Updating chunkhash in both css and js file in webpack
我只在輸出中獲得了JS文件,而我使用了ExtractTextPlugin來提取Css文件。他們的名字中都有chunkhash。我的問題是只有在對JS進行更改時才創建新的chunkhash而不是CSS。 我想要新的chunkhash來改變Css文件。 在我的webpack.config.js文件中。
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
plugins: [new HtmlWebpackPlugin(),
new ExtractTextPlugin("styles.[chunkhash].css")
],
entry: {
main: './src/main1.js',
},
output: {
path: __dirname + "/dist", // or path: path.join(__dirname,
"dist/js"),
filename: "[name].[chunkhash].js"
},
module : {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query:{
presets:['es2015']
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader',
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
}
};
並且主要是main.js文件
var msgs = require('./main2');
require('./css/css1.css');
main2.js只是另一個定義了另一個變量的文件
在ExtractTextPlugin配置中使用contenthash而不是chunkhash 。
new ExtractTextPlugin({
filename: "css/app.[contenthash].css",
allChunks: true
}),
更新1:
見:
我一直在玩它,說實話,沒有使用ExtractTextPlugin為你的問題找到任何合適的解決方案。 如果您使用的是webpack版本4,則可以使用[hash]而不是[contenthash]。示例設置:
// webpack v4
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
new ExtractTextPlugin(
{filename: 'style.[hash].css', disable: false, allChunks: true }
),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash()
]
};
在這里,WebpackMd5Hash用於正確管理哈希值,ExtractTextPlugin用於在配置中嘗試為HTML文件創建哈希值,但這里存在一個問題。 它將在您更改scss文件時更新style.css哈希值,而不是觸摸js。 但是:如果您更改了js文件,它將更新兩個哈希值,它將更新兩者。 要解決該問題,您需要使用另一個插件而不是ExtractTextPlugin。 該插件是https://github.com/webpack-contrib/mini-css-extract-plugin,webpack維護者強烈建議使用它。 這是一個例子:
// webpack v4
const path = require('path');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
// new ExtractTextPlugin(
// {filename: 'style.[hash].css', disable: false, allChunks: true }
// ),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash()
]
};
你需要webpack-md5-hash
插件。
https://github.com/erm0l0v/webpack-md5-hash
npm install --save-dev webpack-md5-hash
在Webpack配置中添加插件:
const WebpackMd5Hash = require('webpack-md5-hash');
module.exports = {
plugins: [
new WebpackMd5Hash()
]
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.