webpack 构建 html 但不显示任何 javascript答案

【问题标题】：webpack builds html but doesn't display any javascriptwebpack 构建 html 但不显示任何 javascript
【发布时间】：2018-07-17 20:03:44
【问题描述】：

所以我大多是 javascript 新手，目前我在展示我们的劳动成果时遇到了问题。我们有一个来自 React/Redux 的 webpack 构建，虽然它显示 css，但它不包含我们编写的任何 JS。任何帮助将不胜感激。我确定我遗漏了一些简单的东西，但我将不胜感激。

这是生成的html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Talent Identification Manager</title>
  <link href="main.css" rel="stylesheet"></head>
  <body>
  <div id="root"></div>
  <script type="text/javascript" src="main.bundle-0.0.1.js"></script></body>
</html>

这里是 webpack 的配置：

'let path = require('path');
let webpack = require('webpack');
const publicPath = '/dist/build/';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    //Content
    entry: './src/index.js',
    mode: 'development',
    // A SourceMap without column-mappings ignoring loaded Source Maps.
    devtool: 'cheap-module-source-map',
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        }),
        //simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
        new HtmlWebpackPlugin({
            title: 'Talent Identification Manager'
        }),
        //Auto replacement of page when i save some file, even css
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],

    output: {
        path: path.join(__dirname, publicPath),
        filename: 'main.bundle-0.0.1.js',
        publicPath: "",
        sourceMapFilename: 'main.map',
    },

    devServer: {
        port: 3000,
        host: 'localhost',
        //Be possible go back pressing the "back" button at chrome
        historyApiFallback: true,
        noInfo: false,
        stats: 'minimal',
        publicPath: publicPath,
        contentBase: path.join(__dirname, publicPath),
        //hotmodulereplacementeplugin
        hot: true
    },
    module: {

        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules(?!\/webpack-dev-server)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-2'],
                    plugins: ['syntax-decorators']
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}'

【问题讨论】：

在 html 中编辑您的 src 以获取脚本
应该是html文件中js包的相对路径
所以问题是缺少具有根 ID 的 div。

标签： reactjs webpack redux

【解决方案1】：

我觉得应该是这样的

output: {
        path: path.join(__dirname, publicPath),
        filename: 'main.bundle-0.0.1.js',
    },

加上html文件中的相对路径

【讨论】：