Doesn't do anything with html file + file loader #3

AndrewRayCode · 2015-04-06T23:44:04Z

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

The text was updated successfully, but these errors were encountered:

skozin · 2015-04-07T00:02:41Z

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.

skozin · 2015-04-07T00:05:20Z

You can also inspect this project for a more real-life example.

skozin · 2015-04-07T00:08:10Z

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.

skozin · 2015-04-07T00:13:38Z

~~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.

AndrewRayCode · 2015-04-07T00:40:41Z

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

skozin · 2015-04-07T04:09:38Z

I was wrong advising to use the raw loader. It produces JS output. Just use no loader for html files.

skozin · 2015-04-09T00:41:03Z

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.

snowman-repos · 2015-11-21T04:51:06Z

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!

Tragetaschen · 2016-03-17T10:34:27Z

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'
  })
},

AndrewRayCode changed the title ~~Doesn't do anything~~ Doesn't do anything with html file + file loader Apr 6, 2015

skozin mentioned this issue Apr 7, 2015

Doesn't find asset paths #4

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't do anything with html file + file loader #3

Doesn't do anything with html file + file loader #3

AndrewRayCode commented Apr 6, 2015

skozin commented Apr 7, 2015

skozin commented Apr 7, 2015

skozin commented Apr 7, 2015

skozin commented Apr 7, 2015

AndrewRayCode commented Apr 7, 2015

skozin commented Apr 7, 2015

skozin commented Apr 9, 2015

snowman-repos commented Nov 21, 2015

Tragetaschen commented Mar 17, 2016

Doesn't do anything with html file + file loader #3

Doesn't do anything with html file + file loader #3

Comments

AndrewRayCode commented Apr 6, 2015

skozin commented Apr 7, 2015

skozin commented Apr 7, 2015

skozin commented Apr 7, 2015

skozin commented Apr 7, 2015

AndrewRayCode commented Apr 7, 2015

skozin commented Apr 7, 2015

skozin commented Apr 9, 2015

snowman-repos commented Nov 21, 2015

After build

Tragetaschen commented Mar 17, 2016