如何使用 Webpack 构建 server.js？

问题描述

我有一个 Vue.js 3 前端，当然它分布在许多 .vue 文件中。

我还有一个 server.js 形式的 Node/Express 后端，然后是其他 Javascript 文件到服务器 API 端点和路由等。

我正在尝试使用 Webpack 构建 server.js，但是当我这样做时，我遇到许多与 .vue 文件未正确加载有关的错误。我不明白为什么在客户端构建时会发生这种情况 负责将 .vue 文件构建到 app.js 文件中。

示例 Webpack 构建错误：

./src/views/information/Index.vue 1:0 模块解析中的错误 Failed: Unexpected token (1:0) 你可能需要一个合适的加载器来 处理这种文件类型，目前没有配置加载器来处理 这个文件。见https://webpack.js.org/concepts#loaders

| | @ ./src/ 同步 ^.*$ ./views/information/Index.vue @ ./src/server.js 55:16-37

这是我用于构建 server.js 的 Webpack 配置：

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals');
const utils = require('./utils');
module.exports = {
        entry: {
            server: utils.resolve('/src/server.js')
        },output: {
            path: utils.resolve('/dist'),filename: 'server.js',},target: 'node',node: {
            // Need this when working with express,otherwise the build fails
            __dirname: false,// if you don't put this in,__dirname
            __filename: false,// and __filename return blank or /
        },externals: [nodeExternals()],// in order to ignore all modules in node_modules folder
    optimization: {
        minimize: false
    },module: {
            rules: [
                {
      test: /\.m?js$/,exclude: ['/node_modules/',/\bcore-js\b/,/\bwebpack\/buildin\b/,/@babel\/runtime-corejs3/],include: [utils.resolve('src')],use: {
        loader: 'babel-loader',options: {
          babelrc : false,// Fixes "TypeError: __webpack_require__(...) is not a function"
      // https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
      // https://babeljs.io/docs/en/options#sourcetype
          sourceType : "unambiguous",presets : [
            ["@babel/preset-env",{
              // Webpack supports ES Modules out of the Box and therefore doesn’t require
              // import/export to be transpiled resulting in smaller builds,and better tree
              // shaking. See https://webpack.js.org/guides/tree-shaking/#conclusion
              modules : false,// Adds specific imports for polyfills when they are used in each file.
              // Take advantage of the fact that a bundler will load the polyfill only once.
              useBuiltIns : "usage",corejs : {
                version : "2",proposals : true
              },}]
          ],}
      }
    },]
        }
    };

这里是 server.js

const express = require('express');
const cors = require('cors');
const path = require('path');
const fs = require('fs');
const serialize = require('serialize-javascript');
const { renderToString } = require('@vue/server-renderer');
const ssrManifest = require('../dist/server/ssr-manifest.json');

const server = express();

server.use(express.json());
server.use(express.urlencoded({
    extended: false 
}));

let distPath = '../dist'

const appPath = path.join(__dirname,distPath,'server',ssrManifest["app.js"]);
const createApp = require(''+appPath).default;

const renderState = (store,windowKey) => {
    const state = serialize(store);
    const autoRemove =
        ';(function(){var s;(s=document.currentScript||document.scripts[document.scripts.length-1]).parentNode.removeChild(s);}());';
    const nonceAttr = store.nonce ? ' nonce="' + store.nonce + '"' : ''
    return store
        ? '<script' +
        nonceAttr +
        '>window.' +
        windowKey +
        '=' +
        state +
        autoRemove +
        '</script>'
        : '';
};


server.use('/api/int/v1',cors(),require('./router/api/int/v1'));

server.get('**',async function(req,res) {
    console.log(req.params[0]);
    let html;
    try {
        const { app,vuexStore,nativeStore,router } = await createApp();
        router.push(req.url);
        await router.isReady();
        let appContent = await renderToString(app);
        fs.readFile(path.resolve(__dirname,'client','index.html'),'utf-8',(err,html) => {
            if (err) {
                throw err
            }
            appContent = `<div id="app">${renderState(vuexStore.state,'__INITIAL_STATE__')}${renderState(nativeStore,'__INITIAL_NATIVE_STATE__')}${appContent}</div>`
            })
        html = html.toString().replace('<div id="app"></div>',`${appContent}`)
        res.setHeader('Content-Type','text/html');
        console.log(html)
        res.send(html);
    } catch (error) {
        if (error.code === 404) {
            return res.status(404).send('404 | Page Not Found');
        }
        return res.status(500).send(error);
        return res.status(500).send('500 | Internal Server Error');
    }
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）