Not quite working for me. #14

ccorcos · 2016-04-28T22:55:37Z

Here's my webpack config:

'use strict'

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const IndexHtmlPlugin = require('indexhtml-webpack-plugin')

const file = {
  src: './src/index.html',
  dest: 'index.html',
}

const css = new ExtractTextPlugin('css/[name]-[chunkhash].css')

module.exports = {
  entry: {
    home: file.src
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html?attrs=link:href script:src img:src' },
      { test: /\.jpg$/, loader: 'file?name=jpg/[name]-[hash].[ext]' },
      { test: /\.js$/, loader: 'babel' },
      { test: /\.css$/, loader: css.extract('css') },
    ]
  },
  output: {
    publicPath: __dirname + '/dist/',
    path: 'dist',
    filename: 'js/[name]-[chunkhash].js'
  },
  plugins: [
    css,
    new IndexHtmlPlugin('home', file.dest),
  ],
  context: __dirname,
  resolve: {
    root: [
      __dirname,
      __dirname + '/src/',
    ]
  }
}

Here's my entry file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HOME</title>
  <link rel="stylesheet" href="~src/home.css">
  <link rel="stylesheet" href="~src/theme.css">
</head>
<body>
  <div id="root"></div>
  <img src="~tux.jpg" alt="">
  <script src="~src/home.js"></script>
</body>
</html>

Here's how it comes out -- the css and js links are broken.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HOME</title>
  <link rel="stylesheet" href="/Users/chetcorcos/code/extract-everything/dist/undefined">

</head>
<body>
  <div id="root"></div>
  <img src="/Users/chetcorcos/code/extract-everything/dist/jpg/tux-75cfd764ce424ade5b02634623a1f044.jpg" alt="">
  <script src="undefined"></script>
</body>
</html>

Also looks like the compiled js contains the html and the image link but I think it should probably get cleaned up.

/* 0 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>HOME</title>\n  <link rel=\"stylesheet\" href=\"" + __webpack_require__(1) + "\">\n  <link rel=\"stylesheet\" href=\"" + __webpack_require__(3) + "\">\n</head>\n<body>\n  <div id=\"root\"></div>\n  <img src=\"" + __webpack_require__(4) + "\" alt=\"\">\n  <script src=\"" + __webpack_require__(5) + "\"></script>\n</body>\n</html>";

/***/ },
/* 1 */
/***/ function(module, exports) {

    // removed by extract-text-webpack-plugin

/***/ },
/* 2 */,
/* 3 */
/***/ function(module, exports) {

    // removed by extract-text-webpack-plugin

/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__.p + "jpg/tux-75cfd764ce424ade5b02634623a1f044.jpg";

/***/ },
/* 5 */
/***/ function(module, exports) {

    console.log("home");

/***/ }

You can check out the code here: https://github.com/ccorcos/extract-everything/tree/indexhtml
Make sure you're in the indexhtml branch.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not quite working for me. #14

Not quite working for me. #14

ccorcos commented Apr 28, 2016 •

edited

Loading

Not quite working for me. #14

Not quite working for me. #14

Comments

ccorcos commented Apr 28, 2016 • edited Loading

ccorcos commented Apr 28, 2016 •

edited

Loading