Webpack 不会将我的文件捆绑在正确的公共目录中答案

【问题标题】：Webpack will not bundle my files in the right public directoryWebpack 不会将我的文件捆绑在正确的公共目录中
【发布时间】：2017-01-23 14:32:06
【问题描述】：

您好，我正在使用 node.js/react/webpack 应用程序。构建应用程序后，应将文件编译到静态 public 文件夹目录中。但是，这不会发生，所有内容都保留在根级别（index.html 和 bundle.js）

在根目录中，我有一个 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()
  ]
};

它呈现外围的 HTML 代码，但不呈现

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

来自脚本/index.js。我已包含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>

【问题讨论】：

path: __dirname,, 在此处追加公用文件夹以输出您的文件.. PublicPath 只是一个虚拟路径，用于在 index html 中链接捆绑 CSS、js
是的，我正在搜索这个。我使用 copy-webpack-plugin 更新了 webpack，但公共目录中仍然没有任何内容。
你不需要 copy-webpack-plugin。我要说的是，只需更改您的输出路径：从 __dirname 到新的输出文件夹。
谢谢，但这只会输出 bundle.js 文件夹。如何让它将 bundle 和 index.html 都移动到其中进行部署？
哦..所以基本上你想在输出文件夹中输出你的 bundle.js 和 index.js ？对您的要求有点困惑

标签： webpack bundle

【解决方案1】：

CopyWebpackPlugin 不是您要求的正确选择，即将您的 index.html 复制到您的构建文件夹。

您可以使用 HtmlWebpackPlugin 来实现更灵活的选项：

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

这是一个 webpack 插件，可简化 HTML 文件的创建以提供 webpack 包。您可以让插件为您生成 HTML 文件，使用 lodash 模板提供您自己的模板或使用您自己的加载器。

该插件将为您生成一个 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>

【讨论】：

module.exports 在哪里，我如何确定 html 文件中的内容？
@HGB ：现在检查，我已经更新了解决方案。此外，您可以将内容放入索引文件中。
嗨，我也更新了上面的代码，但仍然出现错误：var webpackConfig = { ^^^^^^^^^^^^^ SyntaxError: Unexpected identifier
再次更新。在 entry 和 index.html 和 bundle.js 位于公共文件夹之前不需要 var declaratin，但是即使正确请求了 bundle.js，也不会加载任何内容。控制台告诉我Target container is not a DOM element.。显然，此公共目录中的文件无法正常工作。