Question

我的webpack配置有点麻烦，出于某种原因它不会在我的/ public文件夹中创建index.html文件。

请参阅下面的webpack.config.js：

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let DEBUG;

if (process.env.NODE_ENV === "production") {
  DEBUG = false;
} else {
  DEBUG = true; // process.env.NODE_ENV === "development"
}
//const DEBUG = true; // process.env.NODE_ENV === "development"

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: DEBUG ? "bundle.js" : "bundle.min.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["react", "es2015"]
        }
      },
      {
        test: /\.scss$/,
        loaders: DEBUG
          ? [
              "style-loader",
              "css-loader?sourceMap",
              "sass-loader?sourceMap",
              "postcss-loader"
            ]
          : ExtractTextPlugin.extract("css-loader!sass-loader!postcss-loader")
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: "file-loader?name=images/[name].[ext]"
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
  },
  plugins: [
    new ExtractTextPlugin("style.css", {
      allChunks: true
    })
  ]
};

我的根目录中有一个，当我在开发模式下运行时，一切正常。构建脚本是“构建”：“NODE_ENV ='production'webpack -p”。

由于

Answer 1

您需要HTML Webpack插件。这个插件为你创建了html文件，并将webpacks entry prop中定义的每个条目添加到你的html中。别忘了安装它。

$ npm install html-webpack-plugin --save-dev

然后在你的webpack配置中：

var HtmlWebpackPlugin = require('html-webpack-plugin');

...

plugins: [
    new ExtractTextPlugin("style.css", {
      allChunks: true
    }),
    new HtmlWebpackPlugin()
  ]

有关详细信息，请参阅此处： https://github.com/jantimon/html-webpack-plugin

Webpack配置不在公用文件夹中生成index.html

1 个答案: