Question

您正在使用node.js / react / webpack应用程序。一旦构建应用程序，文件应编译到静态public文件夹目录中。但是，这不会发生，一切都保持在根级别（index.html和bundle.js）

在root中我有一个带有以下内容的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')
);

来自scripts / 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>

Answer 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>

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

1 个答案: