Menu
I'm starting my learning path with webpack and I've hit a problem, which I think is caused by extract-loader. When webpack grabs my HTML file, it seems to be unable to properly compile, giving an error on the use of import.meta. I think the error, rather than being a true error, indicates a problem with my understanding of how webpack and its loaders work. Can someone give a look at my files and see if they spot a mistake?
I'm using node v15.12.0, and npm v7.6.3.
Thank you very much.
package.json
{
"devDependencies": {
"css-loader": "^5.2.0",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"style-loader": "^2.0.0",
"webpack": "^5.28.0",
"webpack-cli": "^4.5.0"
}
}
webpack.config.js:
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].html'
}
},
'extract-loader',
'html-loader'
]
}
]
}
}
src/main.js
require('./style.css')
require('./index.html')
src/style.css:
body {
margin: 0;
}
src/index.html
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Hello world!</h1>
<script src="main.js"></script>
</body>
</html>
Webpack output:
$ npx webpack
asset bundle.js 19.6 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 8.95 KiB
modules by path ./src/ 737 bytes
modules by path ./src/*.css 651 bytes
./src/style.css 326 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/style.css 325 bytes [built] [code generated]
./src/main.js 47 bytes [built] [code generated]
./src/index.html 39 bytes [built] [code generated] [1 error]
modules by path ./node_modules/ 8.23 KiB
./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
ERROR in ./src/index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (3:54)
1 | // Imports
2 | import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../node_modules/html-loader/dist/runtime/getUrl.js";
> 3 | var ___HTML_LOADER_IMPORT_0___ = new URL("./main.js", import.meta.url);
| ^
4 | // Module
5 | var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
6 | var code = "<!DOCTYPE html>\n<html lang=\"en\">\n<body>\n <h1>Hello world!</h1>\n <script src=\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\"></script>\n</body>\n</html>\n\n";
at Parser.pp$5.raise (/home/jdferreira/Repositories/Temps/extract-loader-issue/node_modules/babylon/lib/index.js:4454:13)
814
The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.
The html-loader defination says that it exports html as String (What does it mean). it also says that every loadable attributes (for example <img src="image. png" is imported as require('./image. png') ,and you may need to specify loader for images in your configuration ( file-loader or url-loader ), What does it mean.
Webpack file-loader is a loader used mainly for supporting images such as SVG and PNG, and fonts in your webpack project. If your images are not loading in your webpack app then you probably miss the configuration of file-loader.
The html-loader will parse the URLs, require the images and everything you expect. The extract loader will parse the javascript back into a proper html file, ensuring images are required and point to proper path, and the file loader will write the .html file for you.
webpack loader to extract HTML and CSS from the bundle. The extract-loader evaluates the given source code on the fly and returns the result as string. Its main use-case is to resolve urls within HTML and CSS coming from their respective loaders. Use the file-loader to emit the extract-loader's result as separate file.
To begin, you'll need to install html-loader: Then add the plugin to your webpack config. For example: By default every loadable attributes (for example - <img src="image.png"/>) is imported ( const img = require ('./image.png') or import img from "./image.png"" ).
Disclaimer: exports-loader is a third-party package maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack. Allow to setup exports module.exports / export for source files.
This is a bug in extract-loader when used with Webpack 5:
https://github.com/peerigon/extract-loader/issues/111
I'm having the same problem and aparently there is no solution until now. If you can, try to use webpack 4.
Or you can look at html-webpack-plugin, maybe it is userful for your case.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
