为什么WebPack构建html,但不显示任何javascript?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (174)

有一个来自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'
                ]
            }
        ]
    }
}'
提问于
用户回答回答于

我觉得应该是这样

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

加上在html文件中给出相对路径

扫码关注云+社区

领取腾讯云代金券