Webpack 生产构建不加载任何东西 [英] Webpack production build does not load anything
问题描述
我一直在使用 React 和 Webpack 开发一个应用程序一段时间.我的开发环境运行良好，一切都使用 webpack-dev-server 正确加载.
I've been working on an app using React and Webpack for a little while. My development environment works fine, and everything loads properly using webpack-dev-server.
我决定运行应用程序的生产版本，以查看最终产品的大小并观察 webpack 产品版本的一般输出.
I decided to run a production build of the application to see what the end-product might look like size-wise and observe the general output of the webpack product build.
事实证明，运行 webpack -p 虽然它确实产生了输出(稍后会详细介绍)，但当我在浏览器中点击该站点时，它根本不加载任何内容.对输出的快速检查告诉我，我的任何组件代码都没有进入 webpack -p 构建.
It turns out that running webpack -p, while it does produce output (more on that in a minute), does not load anything at all when I hit the site in a browser.. A quick check of the output tells me that none of my component code is making it into the webpack -p build.
图像和 HTML 复制，因为它们存在于我的 src (dev) 文件夹中，但是我的 JS 包输出非常小 - 文件 (main.js) 只有 246 字节.
The images and HTML copy over as they exist in my src (dev) folder, however my JS bundle output is extremely small - the file (main.js) is only 246 bytes.
这是运行 webpack -p 的输出
Here is the output from running 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
当我运行项目的开发版本时，输出明显不同......我知道开发服务器依赖项在那里，并且代码没有被缩小......而且，最重要的是 - 一切都按预期工作运行开发服务器.
When I run the development version of the project, the output is markedly different... I know that the dev server dependencies are in there, and the code is not minified.. And, most importantly - everything works as expected when running the dev server.
$ 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 文件:
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，结果相同.
I don't think I've got a particularly complex, or uncommon setup, and I've tried changing everything from es2015/es6 to commonJS already as well, with the same result.
我不知道这里可能有什么问题；希望有人能指出我遇到的一些明显错误，或者建议可以解决此问题的配置更新/更改.
I'm at a loss as to what the issue could possibly be here; hoping that someone can point out some obvious error I've got, or perhaps suggest config updates/changes that could resolve this problem.
感谢您花时间阅读所有内容！
Thanks for taking the time to read everything!
推荐答案
正如我在评论中提到的，我已经成功使用 webpack 几个月了，而且我从来没有遇到过使用 HTML 文件作为入口点.
As I mentioned in my comment, I've been using webpack successfully for months now, and I've never come across using an HTML file as an entry point.
通常，您会使用 Webpack 打包 javascript、css，有时还会打包图像(即:资产")以供 使用 html 文件.提供该 HTML 文件不在 Webpack 的职责范围内.
Usually you'll use Webpack to package up javascript, css, and sometimes images (ie: "assets") to be used by an html file. Serving that HTML file is outside the realm of Webpack's responsibility.
我建议使用 Webpack 生成仅最终的 javascript 包，然后使用其他方法(即:express 或其他 Web 服务器)来提供该文件和使用它的 html.
I would suggest using Webpack to generate only the final javascript bundle, then using some other method (ie: express, or some other web server) to serve that file and the html that consumes it.
这篇关于Webpack 生产构建不加载任何东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
