Как обслуживать статические изображения / CSS / активы в гибком шаблоне проекта?
Я хотел бы, чтобы статические ресурсы также копировались в папку сборки, такие как изображения, CSS и ресурсы.
Я заметил, что в их примере проекта server.js отображает папку сборки в / public.
server.use('/public', express.static(path.join(__dirname, '/build')))
Нужно ли мне
а. сделать так, чтобы веб-пакет копировал содержимое моей общей папки в папку сборки как часть процесса сборки
б. Или установите другой статический маршрут в экспресс-указании на мою общую папку, - если ссылка на папку сборки может сбивать с толку, так как в ней также есть публичное имя.
с. гибрид, добавьте обработку css к шагу webpack, и обработанные файлы css также помещаются в папку сборки, но имеют статические ресурсы, такие как изображения, которые не были обработаны, и обслуживаются по отдельному маршруту /assets express.static.
Я новичок в вебпаке, поэтому не уверен, как настроить a или c, поэтому помощь там будет принята с благодарностью.
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var webpackConfig = {
resolve: {
extensions: ['', '.js', '.jsx']
},
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client.js'
],
output: {
path: path.resolve('./build/js'),
publicPath: '/public/js/',
filename: 'main.js'
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: [
require.resolve('react-hot-loader'),
require.resolve('babel-loader')
]
},
{ test: /\.json$/, loader: 'json-loader'}
]
},
node: {
setImmediate: false
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
],
devtool: 'eval'
};
module.exports = webpackConfig;