时间戳

首页 > 解决方案 > webpack + express + angular 4 错误“错误：ENOENT：没有这样的文件或目录，stat 'C:\public\index.html'

javascript - webpack + express + angular 4 错误“错误：ENOENT：没有这样的文件或目录，stat 'C:\public\index.html'

问题描述

我的应用程序的目录结构 -

- Project-root
 - client-side-angular-code // angular 4 code
 - public // generated angular 4 static assets including index.html
 - dist
    - bundle.js //generated bundle file by webpack for express code 
    - public //copied static assets from the ../public to dist/public by webpack
 - app.js //express app
 - webpack.config.js
 - package.json
 - .... other miscellaneous files and folders

使用有角度的“bg build”，我将所有静态资产放入项目根目录中的公用文件夹中。现在使用 express 应用程序，我可以通过 index.html 从公共文件夹提供静态资产，并且当我运行“node app.js”并在此处浏览到http://localhost:port 相关代码时工作正常 -

app.use(express.static(path.join(__dirname, 'public')));
app.get('*', function (req, res) {


res.sendFile("./index.html", { root: path.join(__dirname, './public') })
})

但是在我将用于生产部署的 app.js 与剩余的静态资产捆绑到 dist/public 文件夹中之后（如果我尝试运行“node dist/bundle.js”，我将使用“CopyWebpackPlugin”复制静态资产" 并尝试以与以前相同的方式浏览到http://localhost:port ，我收到以下错误。

错误：ENOENT：没有这样的文件或目录，错误时统计“C:\public\index.html”（本机）

因此，我想知道为什么 webpack 没有相对于 bundle.js 的位置和/或我做错了什么？

相关的 webpack 配置文件

    var path = require("path");
const webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

    module.exports = {

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,"dist"),
    //path: __dirname + '/dist',
    publicPath : path.resolve(__dirname,"dist/")
  },
    entry: "./app",
    target: 'node',
    module: {
        rules: [
          { test: /\.json/, loader: "json-loader", exclude:/node_modules/,},
          {test: /\.ts(x?)$/, loader: 'babel-loader!ts-loader',exclude: /node_modules/,},
          { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
          { test: /\.html$/, loader: 'raw-loader' },
          {
            test: /\.(jsx|js)?$/,
            use: [{
              loader: "babel-loader",
              options: {
                cacheDirectory: true,
                presets: ['es2015'] // Transpiles JSX and ES6
              }
            }]
          }
        ],
      },
    resolve: {
        extensions: ['.js', '.ts', '.html', '.css']
    },
    plugins: [
        new CopyWebpackPlugin([
            {from:'public',to:'public'} 
        ]),
        new CleanWebpackPlugin(['dist']),
    ]
};

这是我的 webpack 版本的 package.json 条目（并非所有模块都在使用，正如我们从上面的 webpack config js 中看到的那样） -

 "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.1",
    "webpack-node-externals": "^1.7.2"

非常感谢任何帮助或建议！

标签： javascriptnode.jsangularexpresswebpack

解决方案

弄清楚问题后回答我自己的问题。不得不改成这个—— res.sendFile(process.cwd()+"./public/index.html");

推荐阅读