Структура каталогов моего приложения -
- 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 (где я копирую статические активы с помощью «CopyWebpackPlugin», если я пытаюсь запустить «node dist /») bundle.js "и попробуйте перейти к http://localhost:port так же, как и раньше, я получаю следующую ошибку.
Ошибка: ENOENT: нет такого файла или каталога, статистика 'C: \ public \ index.html'
при ошибке (родной)
Как таковой, я хотел знать, почему webpack не принимает его относительно того, где находится bundle.js и / или что я делаю неправильно?
Соответствующий файл конфигурации веб-пакета
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']),
]
};
Вот мои записи package.json для версии webpack (не все модули используются, как мы видим из конфигурации jpack выше) -
"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"
Любая помощь или предложение высоко ценится!