Develop Reference

How to add multiple entry to reactjs project?

I was trying to configure webpack to have multiple entries in my reactjs project.
after running npm start the development server starts and opens a window but for some reason, the compilation stuck and does not continue.
and when I try to build the project an error shows:
Creating an optimized production build...
Failed to compile.
Cannot read properties of undefined (reading 'filter')
this is my project structure:
src folder
public folder
config:
paths.js :
appHtml: resolveApp('public/client/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/client/index'),
adminHtml: resolveApp('public/admin/index.html'),
adminIndexJs: resolveModule(resolveApp, 'src/admin/index'),
webpack.config.js :
entry: {
client: paths.appIndexJs,
admin: paths.adminIndexJs,
},
output: {
path: paths.appBuild,
pathinfo: isEnvDevelopment,
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/[name].bundle.js',
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
assetModuleFilename: 'static/media/[name].[hash][ext]',
publicPath: paths.publicUrlOrPath,
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
plugins: [
new HtmlWebpackPlugin(
Object.assign(
{},
{
title: "admin",
hash: true,
inject: true,
filename: 'index.html',
template: paths.adminHtml,
}
)
),
new HtmlWebpackPlugin(
Object.assign(
{},
{
title: "client",
hash: true,
inject: true,
filename: 'index.html',
template: paths.appHtml,
}
)
),
]
webpackDevServer.config.js :
historyApiFallback: {
rewrites: [
{ from: /^\/client/, to: '/public/client/index.html' },
{ from: /^\/admin/, to: '/public/admin/index.html' },
],
}

Multiple HtmlWebpackPlugins with webpack DevServer

You can use multiple HtmlWebpackPlugin plugins to create more than one HTML file in production, but only one of the HTML files will be used by the DevServer. Is there any way to use all the HtmlWebpackPlugin plugins in development as well?
module.exports = {
entry: {
main: './src/main.js',
anotherEntry: './src/anotherEntry.js'
},
// This only serves the index.html file on 404 responses
devServer: {
contentBase: './dist',
historyApiFallback: true,
port: 3000,
},
// ...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/main.html',
chunks: ['main'],
}),
new HtmlWebpackPlugin({
filename: 'anotherEntry.html',
template: './src/anotherEntry.html',
chunks: ['anotherEntry'],
}),
]
};

historyApiFallback can be given manual rewrites to control in a more fine-grained manner what the DevServer should fallback to on 404 responses. This way we can serve the other files in development as well.
module.exports = {
entry: {
main: './src/main.js',
anotherEntry: './src/anotherEntry.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: {
rewrites: [
{ from: /^\/anotherEntry/, to: '/anotherEntry.html' },
{ to: '/index.html' },
],
},
port: 3000,
},
// ...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/main.html',
chunks: ['main'],
}),
new HtmlWebpackPlugin({
filename: 'anotherEntry.html',
template: './src/anotherEntry.html',
chunks: ['anotherEntry'],
}),
]
};

Conflict: Multiple assets emit to the same filename index.html

I have create multiple javascript and html pages for navigation with webpack. I am using HtmlWebpackPlugin implementing the multiple pages for webpack. Please excuse me for brevity as I am new with the webpack development.
Here's my webpack config:
module.exports = {
entry: {
index: './app/src/producer/index.js',
process: './app/src/process/process.js',
results: './app/src/results/results.js'
},
mode: 'production',
output: {
path: buildPath,
filename: '[name].[hash:20].js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'app/src/producer/index.html',
inject: 'body',
chunks: ['index']
}
),
new HtmlWebpackPlugin({
filename: 'process.html',
template: 'app/src/process/index.html',
inject: 'body',
chunks: ['process']
}
),
new HtmlWebpackPlugin({
filename: 'results.html',
template: 'app/src/results/index.html',
inject: 'body',
chunks: ['results']
}
),
Here's my project structure for pagination:

how to load moment.js into webpack

I want to load moment.js as a plugin into webpack. Does anyone know how to do so? I get the error "moment" is not defined when trying to call define('moment') in my backbone view
here's my webpack configuration:
app.use(webpackMiddleware(webpack({
context: __dirname + '/src',
entr: './admin-entry.js',
entry: {
'admin-entry': './admin-entry.js',
'admin-login': './admin-login.js'
},
output: {
path: '/webpack',
publicPath: '/webpack',
filename: '[name].js'
},
module: {
noParse: [
new RegExp(jqueryPath),
new RegExp(lodashPath),
new RegExp(qPath),
new RegExp(cookiePath),
new RegExp(momentPath),
new RegExp(dateRangePickerPath)
]
},
resolve: {
alias: {
'jquery': jqueryPath,
'lodash': lodashPath,
'underscore': lodashPath,
'backbone': backbonePath,
'cookie': cookiePath,
'daterangepicker': dateRangePickerPath,
'moment': momentPath,
'q': qPath
},
modulesDirectories: [
'node_modules'
]
},
devtool: 'eval-source-map',
plugins: [
new webpack.SourceMapDevToolPlugin('webpack/[file].map', null, '[absolute-resource-path]', '[absolute-resource-path]')
]
}), {
noInfo: false,
quiet: false,
lazy: false,
// switch into lazy mode
// that means no watching, but recompilation on every request
watchOptions: {
aggregateTimeout: 300,
poll: true
},
publicPath: '/webpack',
// public path to bind the middleware to
// use the same as in webpack
stats: {
colors: true
}
}));

At first, ensure that you install moment with npm command
npm install moment
Now you should have moment in your node_modules folder. Then you should add moment to your project as a global variable so you should change Webpack to resolve it for you.To do this change your webpack.config.js file as below:
plugins: [
....
new webpack.ProvidePlugin({
moment : 'moment'
})
....
]

webpack: How to keep directory structure the same as before compiling the project?

So here is my directory structure：
and this is my webpack configuration:
var fs = require('fs')
var path = require('path')
var autoprefixer = require('autoprefixer')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: {
index: 'src/index/main.js',
video: 'src/video/main.js'
},
output: {
path: path.resolve(__dirname, '../dist/'),
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},
module: {
loaders: ....
},
resolve: {
extensions: ['', '.js', '.less'],
alias: {
'src': path.resolve(__dirname, '../src')
}
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
plugins: [
....some other plugins....
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
mangle: false
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['index', 'video'],
minChunks: 2
}),
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['common', 'index'],
template: 'src/index/index.html',
inject: false,
minify: false
}),
new HtmlWebpackPlugin({
filename: 'video.html',
chunks: ['common', 'video'],
template: 'src/video/index.html',
inject: false,
minify: false
})
]
};
after I webpacked my project, I got result as follows:
And my question is that is it possible to keep my directory structure the same as before webpacking the project? Where did I miss?