使用带有.html条目的webpack

628mspwn 于 12个月前发布在 Webpack

关注(0)|答案(2)|浏览(111)

如何从传统的输入.html开始，将Web应用程序webpack转换为输出.html文件？
这里有一个简单的起点：

index.html

<body>
  <output></output>
  <script src="./main.js"></script>
</body>

字符串

main.js

import React from "react";
document.querySelector("output").innerText = React.version;

型

webpack.config.js

module.exports = {
  entry: "./index.html",
  output: {
    filename: "output.html"
  },
  module: {
    rules: [
      {test: /^index\.html$/, use: [
        {loader: "extract-loader"},
        {loader: "html-loader", options: {
          attrs: ["script:src"]
        }}
      ]}
    ]
  }
}

型
然而，当处理main.js时，这会导致SyntaxError: Unexpected token import。

webpack

来源：https://stackoverflow.com/questions/45063362/using-webpack-with-a-html-entry

2条答案

按热度按时间

agyaoht71#

我也有同样的问题。我的解决方案是：创建一个空的js文件作为入口，如果不需要的话，你可以从输出路径中删除这个js。
另外，如果你使用html-webpack-plugin，你可以设置inject为false，html不会注入js。

new HtmlWebpackPlugin({
  template: './views/cubes.njk', // your template
  filename: 'cubes.html',
  inject: false,
})

字符串

赞(0）回复(0）举报 12个月前

uqzxnwby2#

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./app/index.js",
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: "svg-inline-loader",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(js)$/,
        use: "babel-loader",
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./app/index.html",
      filename: "index.html",
    }),
  ],
  mode: process.env.NODE_ENV === "production" ? "production" : "development",
};

字符串

赞(0）回复(0）举报 12个月前

我来回答

使用带有.html条目的webpack

2条答案

相关问题

热门标签

最新问答