我已经使用 React 和 Webpack 开发一个应用程序有一段时间了。我的开发环境运行良好,并且使用 webpack-dev-server 可以正确加载所有内容。
我决定运行应用程序的生产构建,以查看最终产品的尺寸,并观察 webpack 产品构建的一般输出。
事实证明,跑步webpack -p
,虽然它确实产生输出(稍后会详细介绍),但当我在浏览器中访问该站点时,根本不会加载任何内容。快速检查输出告诉我,我的组件代码都没有进入webpack -p
build.
图像和 HTML 会按其存在于我的 src (dev) 文件夹中的方式进行复制,但是我的 JS 捆绑输出非常小 - 文件 (main.js) 只有 246 字节。
这是运行 webpack -p 的输出
$ npm run build
> [email protected] /cdn-cgi/l/email-protection 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
> [email protected] /cdn-cgi/l/email-protection 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,并得到相同的结果。
我不知道问题可能出在哪里;希望有人能指出我遇到的一些明显错误,或者建议可以解决此问题的配置更新/更改。
感谢您花时间阅读所有内容!