在 nodejs 的服务器端使用 webpack
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29911491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using webpack on server side of nodejs
提问by user237865
I've been trying to use webpack with a nodejs application, and the client side is going fine - a reasonably good documentation on their website + links from google search.
我一直在尝试将 webpack 与 nodejs 应用程序一起使用，并且客户端运行良好 - 他们网站上的一个相当不错的文档+来自谷歌搜索的链接。
Has anyone used webpack on server side of nodejs? or please guide me to any useful links.
有没有人在 nodejs 的服务器端使用过 webpack？或者请指导我找到任何有用的链接。
Thanks.
谢谢。
回答by Olim Saidov
This might be useful: http://jlongster.com/Backend-Apps-with-Webpack--Part-I
这可能有用：http: //jlongster.com/Backend-Apps-with-Webpack--Part-I
Key point is to make external all third party module (in node_modulesdirectory) in webpack config file
关键是在 webpack 配置文件中外部所有第三方模块（在node_modules目录中）
Final config file
最终配置文件
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: './src/main.js',
target: 'node',
output: {
path: path.join(__dirname, 'build'),
filename: 'backend.js'
},
externals: nodeModules,
plugins: [
new webpack.IgnorePlugin(/\.(css|less)$/),
new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false })
],
devtool: 'sourcemap'
}
回答by Tyler Long
A real example with webpack 2.x
webpack 2.x 的真实例子
I want to highlight the difference from client side config:
我想强调与客户端配置的区别：
1. target: 'node'
1. target: 'node'
2. externals: [nodeExternals()]
2. externals: [nodeExternals()]
for node.js, it doesn't make much sense to bundle node_modules/
对于 node.js，捆绑没有多大意义 node_modules/
3. output.libraryTarget: 'commonjs2'
3. output.libraryTarget: 'commonjs2'
without this, you cannot require('your-library')
没有这个，你不能 require('your-library')
webpack.config.js
webpack.config.js
import nodeExternals from 'webpack-node-externals'
const config = {
target: 'node',
externals: [nodeExternals()],
entry: {
'src/index': './src/index.js',
'test/index': './test/index.js'
},
output: {
path: __dirname,
filename: '[name].bundle.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
'targets': {
'node': 'current'
}
}]
]
}
}
}]
}
}
export default [config]
回答by Daniel
Here is the webpack configuration I have used to in my Nodejs application when I wanted it to read JSX which as you know, Node cannot do.
这是我在 Nodejs 应用程序中使用的 webpack 配置，当我希望它读取 JSX 时，正如您所知，Node 无法做到。
const path = require('path');
module.exports = {
// inform webpack that I am building a bundle for nodejs rather than for the
// browser
target: 'node',
// tell webpack the root file of my server application
entry: './src/index.js',
// tells webpack where to put the output file generated
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
// tells webpack to run babel on every file it runs through
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] } }]
]
}
}
]
}
};
After you implement this though, don't forget to head over to your package.jsonfile and include this script:
但是，在实现此功能后，请不要忘记转到您的package.json文件并包含此脚本：
{
"name": "react-ssr",
"version": "1.0.0",
"description": "Server side rendering project",
"main": "index.js",
"scripts": {
"dev:build:server": "webpack --config webpack.server.js"
},
