我第一次使用 webpack,从教程开始,但我一直试图将它部署到数字海洋。
我在开发过程中一直在通过键入运行服务器
npm start
哪个电话:
babel-node devServer.js
这在本地对我来说很好,但是当我尝试在数字海洋上运行它时,它首先工作了几分钟,然后就死了。我在某处读到不建议在实时服务器上运行 babel-node,所以我想这与此有关。
我可以从 package.json 中的这一行看到:
"build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js",
我应该做某种部署步骤,但我仍然只能使用 npm start 运行它,它使用 babel-node devServer.js
构建后如何实际运行它?我究竟做错了什么?
来自 package.json:
"scripts": {
"build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js \"test/**/*@(.js|.jsx)\"",
"clean": "rimraf dist",
"start": "babel-node devServer.js",
"tunnel": "browser-sync start --proxy localhost:7770 --tunnel wesbos",
"test:watch": "npm run test -- --watch"
},
我的开发配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
root: [
path.resolve('./client')
],
alias: {
},
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
产品配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'./client/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': "'production'"
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
resolve: {
root: [
path.resolve('./client')
],
alias: {
},
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};