Webpack、html 加载器、文件加载器和提取加载器

Question

Webpack、html 加载器、文件加载器和提取加载器

我正在开始使用 webpack 进行学习，但遇到了一个问题，我认为这是由extract-loader. 当 webpack 抓取我的 HTML 文件时，它似乎无法正确编译，在使用import.meta. 我认为这个错误，而不是真正的错误，表明我对 webpack 及其加载器如何工作的理解存在问题。有人可以看一下我的文件并看看他们是否发现错误吗？

我正在使用节点 v15.12.0 和 npm v7.6.3。

非常感谢。

包.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"
  }
}

Run Code Online (Sandbox Code Playgroud)

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'
        ]
      }
    ]
  }
}

Run Code Online (Sandbox Code Playgroud)

src/main.js

require('./style.css')
require('./index.html')

Run Code Online (Sandbox Code Playgroud)

src/style.css：

body {
    margin: 0;
}

Run Code Online (Sandbox Code Playgroud)

src/index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Hello world!</h1>
    <script src="main.js"></script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

网页包输出：

$ 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)

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

这是extract-loader与 Webpack 5 一起使用时的一个错误： https ://github.com/peerigon/extract-loader/issues/111

我遇到了同样的问题，显然到目前为止还没有解决方案。如果可以的话，尝试使用 webpack 4。

或者您可以查看html-webpack-plugin，也许它对您的情况有用。

归档时间：	5 年，2 月前
查看次数：	3032 次
最近记录：	4 年，4 月前