我正在使用Docker-izing我公司的网站样板。我遇到的当前问题是我缺乏停止过度优化的能力......这是因为我似乎无法破解node_modules＆gt; :(
基本上，我们按容器部署的GB付费，目前该文件的1/8是node_modules文件夹。当人们查看网站时，他们会得到一个不会发送100mb node_modules文件夹的app.js，那么为什么我不能将我的节点SSR服务器构建到我在Docker镜像内部署的单个js文件中？
有没有什么秘密可以让Webpack（1）内联的东西像babel-polyfill这样我可以为服务器制作一个可部署的js文件？继承人配置：
file：webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var commonConfig = require('./common.config');
var appConfig = require('./webpack.config.prod-app');
var commonLoaders = commonConfig.commonLoaders;
var externals = commonConfig.externals;
var distPath = commonConfig.output.distPath;
var publicPath = commonConfig.output.publicPath;
module.exports = [
appConfig, {
// The configuration for the server-side rendering
name: 'server-side rendering',
context: path.join(__dirname, '..', 'app'),
entry: {
server: ['babel-polyfill', '../server/index']
},
target: 'node',
node: {
__dirname: false
},
output: {
// The output directory as absolute path
path: distPath,
// The filename of the entry chunk as relative path inside the output.path directory
filename: 'server.js',
// The output path from the view of the Javascript
publicPath: publicPath
},
module: {
loaders: commonLoaders.concat({
test: /\.css$/,
loader: 'css/locals?modules&importLoaders=1'
})
},
resolve: {
root: [path.join(__dirname, '..', 'app')],
extensions: ['', '.js', '.jsx', '.css']
},
externals: externals,
plugins: [
// Order the modules and chunks by occurrence.
// This saves space, because often referenced modules
// and chunks get smaller ids.
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.EnvironmentPlugin(['NODE_ENV']),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new webpack.IgnorePlugin(/vertx/),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
}
];
common.config.js
var path = require('path');
var fs = require('fs');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var sassNeatPaths = require("node-neat").with([
path.resolve(__dirname, "../scss")
]).map(function(neatPath) {
return "includePaths[]=" + neatPath;
}).join("&");
var externalNodeModules =
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.reduce(function(acc, cur) {
acc[cur] = 'commonjs ' + cur;
return acc;
}, {});
module.exports = {
output: {
publicPath: '/assets/',
assetsPath: path.join(__dirname, '..', 'public', 'assets'),
distPath: path.join(__dirname, '..', 'compiled')
},
commonLoaders: [
{
/*
* TC39 categorises proposals for babel in 4 stages
* Read more http://babeljs.io/docs/usage/experimental/
*/
test: /\.js$|\.jsx$/,
loader: 'babel-loader',
// Reason why we put this here instead of babelrc
// https://github.com/gaearon/react-transform-hmr/issues/5#issuecomment-142313637
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: [
'transform-decorators-legacy',
'transform-react-remove-prop-types',
'transform-react-constant-elements',
'transform-react-inline-elements'
]
},
exclude: path.join(__dirname, '..', 'node_modules')
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader"
}
],
externals: externalNodeModules,
};
file webpack.config.prod-app.js：
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./common.config');
var commonLoaders = commonConfig.commonLoaders;
var assetsPath = commonConfig.output.assetsPath;
var publicPath = commonConfig.output.publicPath;
module.exports = {
// The configuration for the client
name: 'browser',
/* The entry point of the bundle
* Entry points for multi page app could be more complex
* A good example of entry points would be:
* entry: {
* pageA: "./pageA",
* pageB: "./pageB",
* pageC: "./pageC",
* adminPageA: "./adminPageA",
* adminPageB: "./adminPageB",
* adminPageC: "./adminPageC"
* }
*
* We can then proceed to optimize what are the common chunks
* plugins: [
* new CommonsChunkPlugin("admin-commons.js", ["adminPageA", "adminPageB"]),
* new CommonsChunkPlugin("common.js", ["pageA", "pageB", "admin-commons.js"], 2),
* new CommonsChunkPlugin("c-commons.js", ["pageC", "adminPageC"]);
* ]
*/
// SourceMap without column-mappings
devtool: 'cheap-module-source-map',
context: path.join(__dirname, '..', 'app'),
entry: {
app: ['babel-polyfill', './client']
},
output: {
// The output directory as absolute path
path: assetsPath,
// The filename of the entry chunk as relative path inside the output.path directory
filename: '[name].js',
// The output path from the view of the Javascript
publicPath: publicPath
},
module: {
loaders: commonLoaders.concat(
{
test: /\.scss$/i,
loader: ExtractTextPlugin.extract(['css','sass','import-glob'])
}
)
},
resolve: {
root: [path.join(__dirname, '..', 'app')],
extensions: ['', '.js', '.jsx', '.css']
},
plugins: [
// extract inline css from modules into separate files
new ExtractTextPlugin('/css/styles.css', { allChunks: true }),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new webpack.EnvironmentPlugin(['NODE_ENV'])
],
}
我认为问题可能是目标：＆＃39;节点＆＃39;在阅读完doco之后，它看起来像是使用require（＆＃39;＆＃39;）