Webpack將不會將我的文件捆綁在正確的公共目錄中

您好我正在使用node.js/react/webpack應用程序。一旦構建應用程序，文件應該被編譯到一個靜態的public文件夾目錄中。但是，這種情況不會發生，一切都保持在根級別（index.html，然後bundle.js）Webpack將不會將我的文件捆綁在正確的公共目錄中

在根我有如下一個server.js：

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" 
    }

已更新。沒有錯誤，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() 
    ] 
};

它使得通過腳本/ index.js外圍HTML代碼，但不是

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

。我已經包括import { render } from 'react-dom';

在控制檯中我得到了以下問題：

Target container is not a DOM element

中的index.html如下：

<!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，索引中的js html – Ravi

是的，我正在尋找這個。我使用copy-webpack-plugin更新了webpack，但公共目錄中仍然沒有任何內容。 – HGB

你不需要copy-webpack-plugin。我只是說，只是改變你的輸出路徑：從__dirname到新的輸出文件夾。 – Ravi

CopyWebpackPlugin是不是正確的選擇你的要求，即複製你的index.html到你的build文件夾。

您可以使用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.

該插件將產生一個HTML5文件你，包括使用腳本標記在體內所有的WebPack包。只需將插件添加到您的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將不會將我的文件捆綁在正確的公共目錄中

回答

相關問題