[英]Updating chunkhash in both css and js file in webpack
I have only got the JS file in the output whereas i have used the ExtractTextPlugin to extract the Css file.Both have chunkhash in their names.My problem is that a new chunkhash is only created when changes are made to the JS and not to the css. 我只在输出中获得了JS文件,而我使用了ExtractTextPlugin来提取Css文件。他们的名字中都有chunkhash。我的问题是只有在对JS进行更改时才创建新的chunkhash而不是CSS。 I want new chunkhash for changes in the Css file as well.
我想要新的chunkhash来改变Css文件。 Here in my webpack.config.js file.
在我的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"
})
}
]
}
}; };
and heres the main.js file 并且主要是main.js文件
var msgs = require('./main2');
require('./css/css1.css');
main2.js is just another file where another variable is defined main2.js只是另一个定义了另一个变量的文件
Use contenthash in ExtractTextPlugin configuration instead of chunkhash . 在ExtractTextPlugin配置中使用contenthash而不是chunkhash 。
new ExtractTextPlugin({
filename: "css/app.[contenthash].css",
allChunks: true
}),
Update 1: 更新1:
See : 见:
I have been playing around with it and to be honest, did not find any decent solution for your problem using ExtractTextPlugin. 我一直在玩它,说实话,没有使用ExtractTextPlugin为你的问题找到任何合适的解决方案。 One solution could be using [hash] instead of [contenthash] if you are using webpack version 4. Example setup:
如果您使用的是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()
]
};
In here, WebpackMd5Hash is used to manage hashes correctly, ExtractTextPlugin to create hash for your HTML file as you are trying in your config, yet there is one problem here. 在这里,WebpackMd5Hash用于正确管理哈希值,ExtractTextPlugin用于在配置中尝试为HTML文件创建哈希值,但这里存在一个问题。 It will update your style.css hash as you change your scss files, and not touch js.
它将在您更改scss文件时更新style.css哈希值,而不是触摸js。 BUT: It will update both hashes if you change your js file it will update both.
但是:如果您更改了js文件,它将更新两个哈希值,它将更新两者。 To solve that problem, you need to use another plugin instead of ExtractTextPlugin.
要解决该问题,您需要使用另一个插件而不是ExtractTextPlugin。 The plugin is https://github.com/webpack-contrib/mini-css-extract-plugin and it is strongly recommended by webpack maintainers.
该插件是https://github.com/webpack-contrib/mini-css-extract-plugin,webpack维护者强烈建议使用它。 Here is an example:
这是一个例子:
// 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()
]
};
You need the webpack-md5-hash
plugin. 你需要
webpack-md5-hash
插件。
https://github.com/erm0l0v/webpack-md5-hash https://github.com/erm0l0v/webpack-md5-hash
npm install --save-dev webpack-md5-hash
Add the plugin in your Webpack config: 在Webpack配置中添加插件:
const WebpackMd5Hash = require('webpack-md5-hash');
module.exports = {
plugins: [
new WebpackMd5Hash()
]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.