Webpackの設定でパブリックフォルダのindex.htmlが生成されない

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 
 
    }) 
 
    ] 
 
};

私は私のルートディレクトリに1を持っていると私は開発モードで実行すると、すべてが正常に動作します。ビルドスクリプトは "build"です： "NODE_ENV = 'production' webpack -p"。

ありがとうございました

Answer 1

HTML Webpackプラグインが必要です。このプラグインはhtmlファイルを作成し、webpacks entry propで定義されているすべてのエントリをhtmlに追加します。 インストールすることを忘れないでください。あなたのWebPACKの設定で次に

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

：

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

... 

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

詳細についてはこちらをご覧ください： https://github.com/jantimon/html-webpack-plugin