Top 8 Examples of "webpack-manifest-plugin in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'webpack-manifest-plugin' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
let output = Object.assign(defaultOutput, config.output)
let ManifestPluginMap = (file: ManifestPlugin.FileDescriptor) => {
// 删除 .js 后缀，方便直接使用 obj.name 来访问
if (file.name && /\.js$/.test(file.name)) {
file.name = file.name.slice(0, -3)
}
return file
}
let ManifestPluginOption: ManifestPlugin.Options = {
fileName: config.assetsPath,
map: ManifestPluginMap
}
let plugins = [
!isServer && new ManifestPlugin(ManifestPluginOption),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
!isServer && new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/ ),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
}),
// TypeScript type checking
config.useTypeCheck && new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: path.join(config.root, 'node_modules'),
}),
async: !isProd,],
targets: DEV
? {
chrome: 61
}
: {
uglify: true
}
}
]
]
}
});
config.plugins.push(
new ManifestPlugin({
// Force it to write to disk even when using webpack-dev-server, so it
// can be read from express app
writeToFileEmit: true,
fileName: `../${outputPath}/${manifestName}`
})
);
const defines = {
process: {
env: {
NODE_ENV: `"${process.env.NODE_ENV || "development"}"`
}
}
};
Object.entries(env).forEach(([key, value]) => {
defines.process.env[key] = `"${value}"`;),
filename: ifProduction(
"static/css/[name].[contenthash].css",
"static/css/main.css",
),
}),
getPluginBundleAnalyzer(options.stats),
/**
* Generate a manifest file which contains a mapping of all asset filenames
* to their corresponding output file so that tools can pick it up without
* having to parse `index.html`.
*
* @env production
*/
ifProduction(
new ManifestPlugin({
fileName: "asset-manifest.json",
}),
),
/**
* This is necessary to emit hot updates (currently CSS only):
*
* @env development
*/
ifDevelopment(new webpack.HotModuleReplacementPlugin()),
]),
removeEmpty([
/**
* Fixes a known issue with cross-platform differences in file watchers,
* so that webpack doesn't lose file changes when watched files change rapidly
* https://github.com/webpack/webpack-dev-middleware#known-issues
*new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: true,
},
})
),
ifProd(
new OptimizeCssAssetsPlugin({
canPrint: false,
})
),
ifProd(new webpack.HashedModuleIdsPlugin()),
ifProd(new WebpackMd5Hash()),
ifProd(
new ManifestPlugin({
fileName: '../manifest.json',
})
),
ifProd(
new ChunkManifestPlugin({
filename: '../chunk-manifest.json',
manifestVariable: 'webpackManifest',
})
),
].filter(x => x),
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{enabled: options.withStats,
env: environment,
host: options.withStatsHost,
name,
outputDir: options.withStatsDir,
port: options.withStatsPort,
}),
/**
* Generate a manifest file which contains a mapping of all asset filenames
* to their corresponding output file so that tools can pick it up without
* having to parse `index.html`.
*
* @env production
*/
ifProduction(
new ManifestPlugin({
fileName: "asset-manifest.json",
}),
undefined,
),
/**
* This is necessary to emit hot updates (currently CSS only):
*
* @env development
*/
ifDevelopment(new webpack.HotModuleReplacementPlugin(), undefined),
]),
profile: options.withProfiling,
recordsPath,
resolve: getResolve(),
stats: "verbose",
target,new SWPrecacheWebpackPlugin({
filename: 'service-worker.js',
minify: !(
process.env.NO_COMPRESS || process.env.COMPRESS === 'none'
),
staticFileGlobsIgnorePatterns: [
/\.map$/,
/asset-manifest\.json$/,
],
...opts.serviceworker,
}),
]
: []),
...(opts.manifest
? [
new ManifestPlugin({
fileName: 'manifest.json',
...opts.manifest,
}),
]
: []),
]),
...(isDev || (process.env.NO_COMPRESS || process.env.COMPRESS === 'none')
? []
: [
new webpack.optimize.UglifyJsPlugin({
...uglifyJSConfig,
...(opts.devtool ? { sourceMap: true } : {}),
}),
]),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(),
filename: ifProduction(
"static/css/[name].[contenthash].css",
"static/css/main.css",
),
}),
getPluginBundleAnalyzer(options.stats),
/**
* Generate a manifest file which contains a mapping of all asset filenames
* to their corresponding output file so that tools can pick it up without
* having to parse `index.html`.
*
* @env production
*/
ifProduction(
new ManifestPlugin({
fileName: "asset-manifest.json",
})
),
/**
* This is necessary to emit hot updates (currently CSS only):
*
* @env development
*/
ifDevelopment(new webpack.HotModuleReplacementPlugin()),
]),removeEmpty([
/**
* Fixes a known issue with cross-platform differences in file watchers,
* so that webpack doesn't lose file changes when watched files change rapidly
* https://github.com/webpack/webpack-dev-middleware#known-issues
*
* @env development};
plugins.push(new MiniCssExtractPlugin({
filename,
chunkFilename,
moduleFilename
}));
}
const manifestOpts = manifest === true ? {} : manifest;
if (manifestOpts) {
const { map } = manifestOpts;
manifestOpts.map = (file) => {
file.name = file.name
.replace(/\.css\.css(|\.map)$/i, '.css$1');
return map ? map(file) : file;
};
plugins.push(new ManifestPlugin(manifestOpts));
}
return plugins;
};