webpack-path-rewriter
webpack-path-rewriter copied to clipboard
skozin
Doesn't do anything with html file + file loader
webpack.config.js:
module.exports = {
entry: {
index: "./assets/index.html",
},
modules: [
loaders: {
{test: /\.html$/, loader: PathRewriterPlugin.rewriteAndEmit({
name: '[name].html',
loader: 'file'
})},
Here's index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[[../assets/css/ie8.css]]">
</head>
<body></body>
</html>
Here's what it logs for moduleData inside the plugin itself:
{ url: 'index.html',
content: 'module.exports = __webpack_public_path__ + "bc302e9900842acd0ee4316992fc41bb.html"',
Then silently errors and exits because it doesn't find any paths to rewrite
Sorry for not providing any example. This plugin expects that you require the file you rewriting paths in from a JS file. This require will not inline the contents of the file, it will just return the filal path (as string). Optionally, it can also include the file's hash, so live reload will work when you change the file's contents.
I've added a basic example, build it with node_modules/.bin/webpack command. Notice that both index.jade and index.styl are required from scrpts/index.js.
Do you really need to rewrite paths in a file that is an entry point? This might be possible too, but I can't say for sure without some experimenting.
~~Also, you'll need to use the raw loader instead of file, because webpack-path-rewriter expects to receive the contents of the file as string.~~ – Ignore this, raw loader produces JS. Just use no loader at all for html files.
edit: I did not read your other comment yet, looking at that now..
index.jsx:
require("../assets/index.html");
require("../assets/css/file.css");
webpack config:
entry: {
app: "./app/index.jsx"
},
{test: /\.html$/, loader: PathRewriterPlugin.rewriteAndEmit({
name: '[name].html',
loader: 'raw'
})},
plugins: [
new PathRewriterPlugin(),
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[[css/file.css]]">
</head>
<body></body>
</html>
Output index.html file:
module.exports = "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <link rel=\"stylesheet\" href=\"[[css/file.css]]\">\n </head>\n <body></body>\n</html>\n"
It is not generating html output
I was wrong advising to use the raw loader. It produces JS output. Just use no loader for html files.
I'll leave this issue opened until I test specifying the target of rewriting as an entry point and either fix the plugin to support that case, or mention in the docs that this is impossible.
Folder structure:
/node_modules
/src
⊢ coffescript
| ∟ main.coffee
⊢ stylus
| ∟ main.styl
∟ jade
∟ index.jade
/webpack.config.js
/webpack.config.coffee
/package.json
webpack.config.coffee
CleanWebpackPlugin = require "clean-webpack-plugin"
ExtractTextPlugin = require "extract-text-webpack-plugin"
path = require "path"
PathRewriterPlugin = require "webpack-path-rewriter"
module.exports =
entry:
main: path.join(__dirname, "src/coffeescript/main")
output:
filename: "main-[hash].min.js"
path: path.join(__dirname, "dist/scripts")
publicPath: "/dist"
module: loaders: [
test: /\.coffee$/
loaders: ["coffee", "cjsx"]
,
test: /\.styl$/
loader: ExtractTextPlugin.extract "style-loader", "css-loader?sourceMap!autoprefixer-loader?browsers=last 2 versions!stylus-loader?sourceMap"
,
test: /\.jade$/
loader: PathRewriterPlugin.rewriteAndEmit
name: "../[name].html"
loader: "jade-html?" + JSON.stringify pretty: true
]
plugins: [
# new CleanWebpackPlugin ["dist"]
new ExtractTextPlugin "../styles/main-[hash].min.css",
allChunks: true
new PathRewriterPlugin()
]
resolve:
extensions: ["", ".js", ".coffee", ".json", ".jsx", ".cjsx"]
/src/jade/index.jade
doctype
head
title My App
meta(charset="utf-8")
link(href="[[ /styles/main-*.css ]]", media="all", rel="stylesheet")
body
.js-my-app
script(src="[[ /scripts/main-*.js ]]")
/src/coffeescript/main.coffee
require "../jade/index.jade"
require "../stylus/main.styl"
After build
Folder structure
/node_modules
/dist
⊢ scripts
| ∟ main.19ee97d35cf2fade1edeeff096eac23d.min.js
⊢ styles
| ∟ main.19ee97d35cf2fade1edeeff096eac23d.min.css
∟ index.html
/src
⊢ coffescript
| ∟ main.coffee
⊢ stylus
| ∟ main.styl
∟ jade
∟ index.jade
/webpack.config.js
/webpack.config.coffee
/package.json
index.html
<!DOCTYPE html>
<head>
<title>My App</title>
<meta charset="utf-8">
<link href="/styles/main-*.css" media="all" rel="stylesheet">
</head>
<body>
<div class="js-my-app"></div>
<script src="/scripts/main-*.js"></script>
</body>
Webpack is reporting no errors but as you can see the hash isn't being rewritten into the asset path in the HTML. Any ideas? Thanks!
Instead of the raw loader, you can use the extract loader. I'm currently doing
require('./Entry.htm');
with
{
test: /\.htm$/,
loader: PathRewriterPlugin.rewriteAndEmit({
name: '[name].htm',
loader: 'extract!html'
})
},
