0

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>
    `;
} 

1个回答

0

阅读官方文档发现webpack3.5可以通过library:'serverRender',libraryTarget: 'commonjs'等设置编译后的脚本加载方式,直接修改output中添加上面的选项即可:

{
        entry:{
            server:'./public/javascripts/server/server.js'
        },
        target: "node",
        output:{
            path:path.resolve(__dirname,'public/javascripts/dist'),
            filename:'[name].js',
            library:'serverRender',
            libraryTarget: 'commonjs'
        },
        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
    }

撰写答案

相似问题