极客观点
项目管理
HarmonyOS
webpack服务端打包为什么缺少module.exports？
按照正常结果打包出来的文件中应该是
module.exports=(function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
但是实际结果是：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
webpack.config.js
const webpack = require('webpack');
const path=require('path');
const fs=require('fs');
var publicPath = "assets/";
var nodeModules = {};
fs.readdirSync('../../node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
const config={
entry:{
server:'./server/server.js'
},
target: "node",
output:{
path:path.resolve(__dirname,'serverdist'),
filename:'[name].js',
publicPath: publicPath,
},
node: {
console: true,
global: true,
process: true,
Buffer: true,
__filename: true,
__dirname: true,
setImmediate: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude:/node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0','react'],
}
}
]
},
externals:nodeModules
};
module.exports=config;
server.js
import App from'../views/serverrender/component/App';
import {Provider} from 'react-redux'
import {createStore} from 'redux'
import React from'react'
import ReactDOM from 'react-dom'
import counterApp from '../views/serverrender/component/counterApp';
import {renderToString} from 'react-dom/server';
module.exports=function handlerRender(req,res,result){
const store=createStore(counterApp,result);
const html=renderToString(
<Provider store={store}>
<App/>
</Provider>
);
res.send(renderFullPage(html,result));
}
function renderFullPage(html,preloadedState){
return `
<!doctype html>
<html>
<title>
${preloadedState.name}
</title>
<body>
<div id="root">
${html}
</div>
<script>
window.preloadedState=${JSON.stringify(preloadedState).replace(/</g,'\\u003c')};
</script>
<script src="./javascripts/dist/client.js"></script>
</body>
</html>
`;
}
阅读官方文档发现webpack3.5可以通过library:'serverRender',libraryTarget: 'commonjs'等设置编译后的脚本加载方式，直接修改output中添加上面的选项即可：