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将不会将我的文件捆绑在正确的公共目录中

回答

相关问题