no way to replace paths in HTML with output chunk names (for built css, js, etc.) #167
Description
I'm submitting a feature request
Webpack version:
3.10.0
HTML-Loader version:
0.5.5
Please tell us about your environment:
Ubuntu linux 14.04 within a Docker Container
Current behavior:
I've included a lot of info below - here's a video that does an overview:
https://www.useloom.com/share/6f208aa26a3f4db3a54bdfc9b838805d
With the following template:
<html>
<head>
<link rel="stylesheet" href="/assets/css/404.css">
</head>
</html>
and the following webpack config:
{
entry: entryPoints,
output: {
path: DIST_DIR,
publicPath: '/assets/',
filename: 'js/[name]-[hash].js'
},
module: {
rules: [{
enforce: 'pre',
test: /\.(js|less|css)$/,
exclude: [/node_modules/, /bower_components/],
loader: StringReplacePlugin.replace({ replacements })
}, {
test: /\.html$/,
use: 'raw-loader'
}, {
test: /\.js$/,
exclude: [/node_modules/, /bower_components/],
use: 'babel-loader'
}, {
test: /\/assets\//,
exclude: [/node_modules/, /bower_components/],
use: [{
loader: 'file-loader',
options: {
name: '[1]/[name]-[hash].[ext]',
regExp: /\/assets\/(.+)\/(.+)$/
}
}]
}, {
test: /\/(node_modules|bower_components)\/(.+)\.(eot|woff|ttf)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name]-[hash].[ext]',
outputPath: '3rd/fonts/'
}
}]
}, {
test: /\/(node_modules|bower_components)\/(.+)\.(gif|jpg|png|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name]-[hash].[ext]',
outputPath: '3rd/img/'
}
}]
}, {
test: /\.html$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'templates/'
}
}, {
loader: 'extract-loader',
options: { publicPath: '/assets/' }
}, {
loader: 'html-loader',
options: {
attrs: ['img:src', 'link:href', 'meta:content'],
root: path.join(__dirname, '../..')
}
}]
}, {
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
root: path.join(__dirname, '../..')
}
}, {
loader: 'postcss-loader',
options: { config: { path: POSTCSS_PATH } }
}, {
loader: 'less-loader'
}]
})
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new StringReplacePlugin(),
new webpack.SourceMapDevToolPlugin({
filename: 'js/[name]-[hash].js.map',
test: /\.js$/
}),
new webpack.ProvidePlugin({
_: 'lodash'
}),
new webpack.LoaderOptionsPlugin({
test: /\.ejs$/,
options: {
ejsLoader: ejsConfig()
}
}),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('css/[name]-[hash].css')
]
resolve: {
modules: [
path.join(__dirname, '../../bower_components'),
path.join(__dirname, '../../node_modules'),
path.join(__dirname, '../../src/client/js'),
path.join(__dirname, '../../src/shared'),
path.join(__dirname, '../../assets')
]
}
}
I get resolution errors
Expected/desired behavior:
I would expect the following output:
<html>
<head>
<link rel="stylesheet" href="/assets/css/404-[webpackhash].css">
</head>
</html>
Where [webpackhash] is the built webpack hash from the file loader/extract text plugin I use to process CSS files from the top-level JS bundle. The resolution errors make sense since the file /assets/css/404.css technically exists nowhere on disk (and not in my assets folder). It's a chunk that I'm generating during the same build step using the aforementioned loaders/plugins. I'm moving over from html-webpack-plugin, which seems to just do this automagically, so I'm not sure if there's something I'm missing on how to get chunks in the current build to transform within the HTML.
- What is the motivation / use case for changing the behavior?
A big plus of this lib is that it properly transforms asset hashes automatically, so I'd figure it would provide some way of doing the same for output chunks in the current bundle. This could be naive. I'm no webpack expert. :-P
-
Browser: N/A
-
Language: N/A