Javascript 网页包生产版本不加载任何内容

Javascript 网页包生产版本不加载任何内容,javascript,reactjs,webpack,production,Javascript,Reactjs,Webpack,Production,我已经用React和Webpack开发了一个应用程序有一段时间了。我的开发环境运行良好,使用WebpackDevServer可以正确加载所有内容 我决定运行应用程序的生产构建,以查看最终产品的大小,并观察webpack产品构建的一般输出 事实证明,运行webpack-p,虽然它确实会产生输出(一分钟内会有更多内容),但当我在浏览器中访问站点时,根本不会加载任何内容。。对输出的快速检查告诉我,没有任何组件代码进入webpack-pbuild 图像和HTML复制到我的src(dev)文件夹中,但是我

我已经用React和Webpack开发了一个应用程序有一段时间了。我的开发环境运行良好,使用WebpackDevServer可以正确加载所有内容

我决定运行应用程序的生产构建,以查看最终产品的大小,并观察webpack产品构建的一般输出

事实证明,运行
webpack-p
,虽然它确实会产生输出(一分钟内会有更多内容),但当我在浏览器中访问站点时,根本不会加载任何内容。。对输出的快速检查告诉我,没有任何组件代码进入
webpack-p
build

图像和HTML复制到我的src(dev)文件夹中,但是我的JS包输出非常小,文件(main.JS)只有246字节

下面是运行webpack-p的输出

$ npm run build

> project@0.1.0 build /Users/me/Development/project
> NODE_ENV=production webpack -p --bail --progress --config webpack.config.babel.js

Hash: 9e5f6974ce21c920a375
Version: webpack 1.12.10
Time: 2003ms
            Asset       Size  Chunks             Chunk Names
       index.html    1.45 kB          [emitted]
  images/edit.svg  524 bytes          [emitted]
images/search.svg    1.19 kB          [emitted]
          main.js  246 bytes    0, 1  [emitted]  javascript, html
    + 219 hidden modules
当我运行项目的开发版本时,输出明显不同。。。我知道dev服务器依赖项就在那里,代码没有缩小。。而且,最重要的是,在运行dev服务器时,一切都按预期工作

$ npm start

> project@0.1.0 start /Users/me/Development/project
> webpack-dev-server --hot --display-modules --config webpack.config.babel.js

http://localhost:3333/
webpack result is served from /
content is served from /Users/me/Development/project/dist
Hash: 1b34ed58f9e323966ada
Version: webpack 1.12.10
Time: 2745ms
            Asset       Size  Chunks             Chunk Names
       index.html    1.45 kB          [emitted]
  images/edit.svg  524 bytes          [emitted]
images/search.svg    1.19 kB          [emitted]
          main.js    1.54 MB    0, 1  [emitted]  html, javascript
这是我的webpack.config.babel.js文件:

import webpack from 'webpack';
import path from 'path';

import ModernizrWebpackPlugin from 'modernizr-webpack-plugin';
import modernizrConfig from './modernizr.config';

const appDir = path.resolve(__dirname, './src');
const distDir = path.resolve(__dirname, './dist');
const nodeModulesDir = path.resolve(__dirname, './node_modules');

const excludeDirs = /(node_modules|bower_components)/;

module.exports = {
    entry: {
        javascript: appDir + '/main.js',
        html: appDir + '/index.html'
    },
    output: {
        path: distDir,
        filename: 'main.js',
    },
    devServer: {
        contentBase: distDir,
        inline: true,
        port: 3333
    },
    resolve: {
        extensions: ['', '.js', '.es6'],
        modulesDirectories: [
            'node_modules',
            './src'
        ]
    },
    plugins: [
        // new webpack.optimize.CommonsChunkPlugin('common.js'),
        // new ModernizrWebpackPlugin(modernizrConfig),
    ],
    sassLoader: {
        sourceMap: false,
        includePaths: [
            appDir,
            nodeModulesDir,
            nodeModulesDir + '/breakpoint-sass/stylesheets/',
            nodeModulesDir + '/susy/sass'
        ]
    },
    module: {
        loaders: [
            { // js/jsx
                test: /\.js?$/,
                exclude: excludeDirs,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    presets: [
                        'es2015', 'react'
                    ]
                }
            },
            { // html
                test: /\.html$/,
                exclude: excludeDirs,
                loader: 'file?name=[name].[ext]'
            },
            { // images
                test: /\.(gif|png|jpg|jpeg|svg)$/,
                exclude: excludeDirs,
                loader: 'file?name=images/[name].[ext]'
            },
            { // sass
                test: /\.scss$/,
                exclude: excludeDirs,
                loader: 'style!css!sass'
            }
        ]
    }
}
我不认为我已经有了一个特别复杂或不寻常的设置,我已经尝试过将所有东西从es2015/es6更改为commonJS,并且得到了相同的结果

我不知道这里可能有什么问题;希望有人能指出我的一些明显错误,或者建议进行配置更新/更改,以解决这个问题


感谢您抽出时间阅读所有内容

正如我在评论中提到的,我已经成功地使用webpack好几个月了,而且我从未遇到过使用HTML文件作为入口点的情况

通常,您会使用Webpack打包javascript、css,有时还会打包html文件使用的图像(例如:“资产”)。提供HTML文件不属于Webpack的责任范围


我建议使用Webpack只生成最终的javascript包,然后使用其他方法(例如:express或其他web服务器)来提供该文件和使用该文件的html。

我已经成功使用Webpack几个月了,我从未遇到过使用html文件作为入口点的情况。通常它只是一个javascript文件,输出到
dist
文件夹或类似的东西,然后该文件被包含在其他HTML页面的某个地方。这就成功了。我不知道为什么我会在那里,或者我是从哪里想到把HTML文件放到入口点的。谢谢你的快速修复!你能把它转换成一个答案并接受它吗?谢谢。:)不知道我怎么能做到。。。除非你的评论是针对@rossipedia:)