Open ccorcos opened 8 years ago
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.
Here's my webpack config:
Here's my entry file:
Here's how it comes out -- the css and js links are broken.
Also looks like the compiled js contains the html and the image link but I think it should probably get cleaned up.
You can check out the code here: https://github.com/ccorcos/extract-everything/tree/indexhtml Make sure you're in the indexhtml branch.