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. I want new chunkhash for changes in the Css file as well. Here in my webpack.config.js file.
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
var msgs = require('./main2');
require('./css/css1.css');
main2.js is just another file where another variable is defined
Use contenthash in ExtractTextPlugin configuration instead of chunkhash.
new ExtractTextPlugin({
filename: "css/app.[contenthash].css",
allChunks: true
}),
Update 1:
See :
I have been playing around with it and to be honest, did not find any decent solution for your problem using ExtractTextPlugin. One solution could be using [hash] instead of [contenthash] if you are using webpack version 4. Example setup:
// 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. It will update your style.css hash as you change your scss files, and not touch js. BUT: It will update both hashes if you change your js file it will update both. To solve that problem, you need to use another plugin instead of ExtractTextPlugin. The plugin is https://github.com/webpack-contrib/mini-css-extract-plugin and it is strongly recommended by webpack maintainers. 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.
https://github.com/erm0l0v/webpack-md5-hash
npm install --save-dev webpack-md5-hash
Add the plugin in your Webpack config:
const WebpackMd5Hash = require('webpack-md5-hash');
module.exports = {
plugins: [
new WebpackMd5Hash()
]
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With