Webpack ProductionビルドにIndex.htmlを含めるには

バンドルされたjsファイルとcssファイルを単に使用するプロジェクトのルートに次のindex.htmlがあります。Webpack ProductionビルドにIndex.htmlを含めるには

<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Purchasing Plus</title> 
    <link rel="stylesheet" href="./build/style.css" /> 
</head> 

<body> 
    <div id="mountPoint"></div> 
    <script src="./build/bundle.js"></script> 
</body> 

</html>

、ここでは私のWebPACK config`を

var path = require('path'); 
var webpack = require('webpack'); 
var extractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { main: './source/scripts/main.js' }, 

    output: { 
     filename: './build/bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, 
      { 
       test: /\.(scss?|css)$/, 
       loader: extractTextPlugin.extract('css!sass'), 
       exclude: /node_modules/ 
      } 
     ] 
    }, 
    plugins: [ 
     new extractTextPlugin('./build/style.css', { 
      allChunks: true 
     }), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false }, 
      mangle: true, 
      sourcemap: false, 
      beautify: false, 
      dead_code: true 
     }) 
    ] 
};

これは私がWebPACKの-devのサーバーを実行することができ、ウェブパックdevに関する素晴らしい作品と私のページがhttp://localhost:8080/

問題に表示されていますビルドフォルダにあるbundle.js、style.css、およびindex.htmlがすべて隣り合わせになるように、index.htmlを本番ビルドに含めることです。

これは可能ですか？

出典

2016-11-03 David Kethel

最も簡単な解決策は、copy-webpack-pluginを使用することです。これは静的なファイルをある場所から別の場所にコピーするのに役立ちます。

{ 
    from: 'path/to/index.html', 
    to: 'build/', 
    toType: 'file' 
},

その他の解決方法は、file-loaderです。これにより、指定された拡張子がテストされ、指定された場所にファイルが移動されます。 Webpackエントリにindex.htmlを追加する必要があります。

{ 
    test: /\.html?$/, 
    loader: "file?name=./[name].[ext]" 
}

希望します。

出典

2016-11-03 05:13:13

Webpack ProductionビルドにIndex.htmlを含めるには

答えて

関連する問題