Webpackは私のファイルを正しい公開ディレクトリにバンドルしません

こんにちは、node.js/react/webpackアプリケーションを使って作業しています。アプリケーションがビルドされたら、ファイルは静的publicフォルダディレクトリにコンパイルする必要があります。ただし、これは発生しませんし、すべてがルートレベル（index.htmlをとbundle.js）のままで、私は次のようでserver.jsを持つルートでWebpackは私のファイルを正しい公開ディレクトリにバンドルしません

：

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(5000, 'localhost', (err) => { 
    if (err) { 
    console.log(err); 
    } 
    console.log('Listening at localhost:5000'); 
});

私は、持っていますscriptsフォルダー私のApp.jsとすべての主要なインポートされたスクリプトとCSSが住んでいるところ。私のpackage.jsonには、開始/ビルドスクリプトが含まれています。

"scripts": { 
    "start": "node server.js", 
    "build": "cross-env BABEL_ENV=production webpack --config webpack.config.production.js", 
    "lint": "eslint --cache --ignore-path .gitignore --format=node_modules/eslint-formatter-pretty . *.js", 
    "test": "npm run lint" 
    }

更新されました。 publicディレクトリにbundle.jsとindex.htmlというエラーはありませんが、ページは空白です。

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

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/dev-server', 
    './scripts/index' 
    ], 
    output: { 
    path:path.join(__dirname, 'public'), 
    filename: 'bundle.js', 
    publicPath: '/public/' 
    }, 
    resolve: { 
    modulesDirectories: ['node_modules', 'scripts'], 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devtool: 'eval-source-map', 

    module: { 
    loaders: [ 
     { 
     exclude: /node_modules/, 
     test: /\.jsx?$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'scripts') 
     }, 
     { 
     test: /\.css/, 
     loaders: ['style', 'css'], 
     include: __dirname + '/scripts' 
     } 

    ] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin() 
    ] 
};

これは、辺境のHTMLコードをレンダリングではなく、スクリプト/ index.jsから

render(
    <App />, 
    document.getElementById('root') 
);

。次のようにindex.htmlには

Target container is not a DOM element

：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Webpack App</title> 
    </head> 
    <script type="text/javascript" src="/public/bundle.js"></script></body> 
    <body> 
</html>

出典

2017-01-23 HGB

パス：__dirnameは,,出力にここにパブリックフォルダを追加あなたのファイル.. PublicPathは、バンドルCSS、インデックスhtmlのjsをリンクするために使用される仮想パスです – Ravi

はい、私はこれについて検索していました。 webpack wtih copy-webpack-pluginを更新しましたが、公開ディレクトリには何もありません。 – HGB

copy-webpack-pluginは必要ありません。私が言っていることは、__dirnameから新しい出力フォルダに出力パスを変更することだけです。 – Ravi

CopyWebpackPluginはあなたの条件、すなわち、コピーする正しい選択ではない私は、私は次の問題を取得するコンソールでimport { render } from 'react-dom';

が含まれていますindex.htmlをビルドフォルダに追加します。

さらに柔軟なオプションと、そのためにあなたがHtmlWebpackPluginを使用することができます。

https://github.com/ampedandwired/html-webpack-plugin

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.

プラグインはスクリプトタグを使用して、体内のすべてのWebPACKのバンドルが含まれてあなたのためのHTML5ファイルを生成します。。ただ、次のようにあなたのWebPACKの設定にプラグインを追加します。

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = { 
    ..... 
    ..... 
    ..... 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin() 
] 
};

これは、生成されるファイルDIST/index.htmlを含む以下：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Webpack App</title> 
    </head> 
    <body> 
    <script src="index_bundle.js"></script> 
    </body> 
</html>

出典

2017-01-25 17:40:46 Ravi

ここにmodule.exportsがあります。 htmlファイルの中に何が入るのかを決めますか？ – HGB

@HGB：今すぐチェックして、解決策を更新しました。また、インデックスファイルにコンテンツを配置することもできます。 – Ravi

こんにちは、上記のコードを更新しましたが、まだエラーが発生しています： 'var webpackConfig = { ^^^^^^^^^^^^ SyntaxError：予期しない識別子' – HGB

Webpackは私のファイルを正しい公開ディレクトリにバンドルしません

答えて

関連する問題