module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
},
};import React from 'react';
import image from './image.png';
const Example = () => (
<img src={image} />
);import React from 'react';
const Example = () => (
<img src={require('./image.png')} />
);axios.get('https://cors-anywhere.herokuapp.com/https://some-cors-not-allowed-api.com');@import и url() в импортированном в проект css коде как import/require() и разрешает их.
test: /\.js[x]?$/,'./jsx/app.jsx', а include path.join(__dirname, 'src'). Снесите include. И используте в проектах только свежие версии библиотек. Актуальная мажорная версия Webpack - 4.
Использовать один конфиг с двумя entrypoint?
Возможно ли будет прикрутить hot-reload?
Как настроить webpack для expressjs backend и frontend?
Вариант с настройкой гит репо на сервере не подойдёт.
index.jsв нижнем регистре.
resolve: {
alias: {
'WidgetItems': './src/js/common/widgetItems/SomeEnvWidgetItems'
}
}export { default as SomeWdgetItem1 } from './SomeWdgetItem1';
export { default as SomeWdgetItem2 } from './SomeWdgetItem2';
/* ... */import * as widgetItems from 'WidgetItems';import { default as SomeWdgetItem1 } from './SomeWdgetItem1';
import { default as SomeWdgetItem2 } from './SomeWdgetItem2';
/* ... */
export default [
SomeWdgetItem1,
SomeWdgetItem2,
/* ... */
];import widgetItemsList from 'WidgetItems';
module.exports = {
/* ... */
output: {
/* ... */
publicPath: '/'
},
/* ... */
devServer: {
historyApiFallback: true,
},
};"start": "webpack-dev-server --mode development --open --hot --history-api-fallback",npm i -S babel-preset-stage-0{
"presets": ["env", "react", "stage-0"]
}