Webpack 生产构建无法加载任何内容。

Question

我一直在使用React和Webpack开发一个应用程序。我的开发环境很好，使用webpack-dev-server时一切都能正常加载。

我决定运行一个生产版本的构建，以了解最终产品的大小，并观察webpack产品构建的总体输出情况。

结果发现，运行webpack -p虽然会产生输出（稍后再说），但在浏览器中访问网站时不会加载任何东西。快速检查输出告诉我，我的组件代码没有进入webpack -p构建。

图像和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

当我运行项目的开发版本时，输出结果明显不同...我知道开发服务器的依赖项在其中，并且代码未经过缩小处理。最重要的是，当运行开发服务器时，一切都按预期工作。

$ 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

Here's my webpack.config.babel.js file:

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，但结果相同。

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

感谢您花时间阅读所有内容！

- Dave Willidow

---

我已经成功地使用webpack好几个月了，但我从未尝试过将HTML文件用作入口点。通常只是使用一个JavaScript文件作为入口点，然后将其输出到一个名为dist的文件夹或类似的位置，然后将“那个”文件包含在其他某个HTML页面中。 - rossipedia

太好了，这就解决了。我不确定为什么会有那个东西，或者是我从哪里想到将HTML文件放入入口点中。感谢你的快速解决！ - Dave Willidow

你能把那个转换成一个答案并接受它吗？谢谢。 :) - Juho Vepsäläinen

不确定我该怎么做...除非你的评论是针对@rossipedia的 :) - Dave Willidow

Answer 1

正如我在评论中提到的，我已经成功地使用webpack几个月了，并且我从来没有遇到过使用HTML文件作为入口点。

通常情况下，您将使用Webpack打包javascript、css和有时是图像（即“资产”），以供html文件调用。服务于该HTML文件不在Webpack职责范围内。

我建议只使用Webpack生成最终的javascript包，然后使用其他方法（例如：express或其他Web服务器）来提供该文件和消费它的HTML。

- rossipedia