logo标签列表

Webpack、html-loader、file-loader 和 extract-loader

webpack
10

我正在通过webpack开始我的学习之旅，但我遇到了一个问题，我认为这是由extract-loader引起的。当webpack获取我的HTML文件时，似乎无法正确编译，导致在使用import.meta时出现错误。我认为这个错误并不是真正的错误，而是表明我对webpack及其加载器如何工作的理解存在问题。能否有人查看我的文件，看看是否发现了错误？

我使用的是node v15.12.0和npm v7.6.3。

非常感谢。

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输出：

$ 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)
您在主文件中导入html文件是做什么的呢？（我猜这是您的入口点？） - tmhao2005
我明白你的意思。我已经更新了问题，使用HTML作为入口点，并从JS文件中删除了它的导入。然而，问题仍然存在。 - jdferreira
我也尝试关闭html-loader的esModule，但是错误变得更加奇怪了：似乎CSS代码被逐字插入到JS文件中，因为我得到的错误以(function (exports, require, module, __filename, __dirname) { body {开头。 - jdferreira
不行。如果您希望将 index.html 设置为索引文件，应该使用 html 插件而不是导入它。顺便说一下，请不要在 webpack 配置文件中将 html 文件设置为应用程序的入口点。 - tmhao2005
我的想法是处理HTML文件并将其保存为独立的文件，特别是因为我可能希望在开发过程中将CSS文件作为独立文件而不是与JS内联。这就是为什么我在main.js中导入HTML的原因。也许还有其他方法？我正在遵循一个相当古老的（webpack 4）YouTube教程（https://youtu.be/PwJVivB_XcE?t=334），它就是这样做的，但在视频的情况下，它可以工作，而使用这些工具的当前版本则不行。 - jdferreira
1
你解决了这个问题吗，@jdferreira？ - Rob
1个回答
5
这似乎不是与"css-loader": "^3.4.2"有关的问题。 - Tobi G.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接