Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'case-sensitive-paths-webpack-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.
const tsOptions = getTSCommonConfig();
const plugins = [
new FilterWarningsPlugin({
exclude: /.*@choerodon.*/,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
new ExtractTextPlugin({
filename: cssFileName,
disable: false,
allChunks: true,
}),
new CaseSensitivePathsPlugin(),
new webpack.ProgressPlugin((percentage, msg, addInfo) => {
const stream = process.stderr;
if (stream.isTTY) {
if (stream.isTTY && percentage < 0.71) {
stream.cursorTo(0);
stream.write(`📦 ${chalk.magenta(msg)} (${chalk.magenta(addInfo)})`);
stream.clearLine(1);
} else if (percentage === 1) {
// eslint-disable-next-line no-console
console.log(chalk.green('\nwebpack: bundle build is now finished.'));
}
} else {
const outputStr = '📦 bundleing!';
if (percentage !== 1 && !processTimer) {
// eslint-disable-next-line no-console
console.log(`📦 bundleing! ${new Date()}`);
// eslint-disable-line
isDev ? 'development' : 'production',
), // eslint-disable-line
'process.env.HMR': process.env.HMR,
// 给 socket server 用
...(process.env.SOCKET_SERVER
? {
'process.env.SOCKET_SERVER': JSON.stringify(
process.env.SOCKET_SERVER,
),
}
: {}),
...stringifyObject(opts.define || {}),
}),
...(opts.html ? [new HTMLWebpackPlugin(opts.html)] : []),
new CaseSensitivePathsPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
context: __dirname,
},
}),
new ProgressPlugin(),
...(process.env.TS_TYPECHECK ? [new ForkTsCheckerWebpackPlugin()] : []),
...(opts.ignoreMomentLocale
? [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
: []),
...commonsPlugins,
...copyPlugins,
...(process.env.ANALYZE
? [
new BundleAnalyzerPlugin({
analyzerMode: 'server',
export function createPlugins(
server: ServerConfig,
buildConfig: Object = {},
userConfig: Object = {}
): {optimization: Object, plugins: Object[]} {
let production = process.env.NODE_ENV === 'production'
let optimization = {}
let plugins = [
// Enforce case-sensitive import paths
new CaseSensitivePathsPlugin(),
// Replace specified expressions with values
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
...buildConfig.define,
...userConfig.define,
}),
// XXX Workaround until loaders migrate away from using this.options
new webpack.LoaderOptionsPlugin({
options: {
context: process.cwd()
}
})
]
if (server) {
// HMR is enabled by default but can be explicitly disabled
path.join(bundle.assetsDir || '', 'chunk-manifest.json'),
),
__ASSETS_MANIFEST__: JSON.stringify(
path.join(bundle.assetsDir || '', 'assets-manifest.json'),
),
'process.browser': JSON.stringify(false),
'process.server': JSON.stringify(true),
}),
]),
};
if (_DEV) {
nodeConfig.stats = 'none';
nodeConfig.watch = true;
nodeConfig.plugins.push(
new CaseSensitivePathsPlugin(),
new LoggerPlugin({
verbose: bundle.verbose,
target: 'server',
}),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
// show a warning when there is a circular dependency
failOnError: false,
}),
);
}
return nodeConfig;
}
extensions: [
".mjs",
".js",
".jsx",
".ts",
".tsx",
".css",
".sss",
".json"
]
},
plugins: removeEmpty([
// Enforces the entire path of all required modules match the exact case of the actual path on disk.
// https://github.com/Urthen/case-sensitive-paths-webpack-plugin
new CaseSensitivePathsPlugin(),
// Improve source caching in Webpack v2.
// Therefor we disable it in production and only use it to speed up development rebuilds.
//
//
enableHardSource ? new HardSourceWebpackPlugin({
// Either an absolute path or relative to output.path.
cacheDirectory: path.resolve(root, ".hardsource", `${target}-${mode}`),
// Either an absolute path or relative to output.path. Sets webpack's
// recordsPath if not already set.
recordsPath: path.resolve(root, ".hardsource", `${target}-${mode}`, "records.json"),
// Optional field. This field determines when to throw away the whole
// cache if for example npm modules were updated.
environmentHash: {
// the requesting resource.
new ModuleNotFoundPlugin(locations.root),
new ExpoDefinePlugin({
mode,
publicUrl,
config,
productionManifestPath: locations.production.manifest,
}),
// This is necessary to emit hot updates (currently CSS only):
isDev && new HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isDev && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isDev && new WatchMissingNodeModulesPlugin(locations.modules),
isProd &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate a manifest file which contains a mapping of all asset filenames
loaders: [
{
path: require.resolve('babel-loader'),
query: {
babelrc: false,
cacheDirectory: _IS_DEV_,
compact: _IS_PROD_,
presets: [_IS_CLIENT_ ? clientPreset : serverPreset],
},
},
],
}),
// Improve OS compatibility
// https://github.com/Urthen/case-sensitive-paths-webpack-plugin
new CaseSensitivePathsPlugin(),
_IS_DEV_
? new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
// show a warning when there is a circular dependency
failOnError: false,
})
: null,
_IS_DEV_
? new WriteFilePlugin({
exitOnErrors: false,
log: true,
// required not to cache removed files
useHashIndex: false,
})
},
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
cache: true,
}),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: cssFileName,
}),
new CaseSensitivePathsPlugin(),
new WebpackBar({
name: '🚚 Bisheng',
color: '#2f54eb',
}),
new FriendlyErrorsWebpackPlugin(),
new CleanUpStatsPlugin(),
],
};
}
/**
* 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
*/
ifDevelopment(new TimeFixPlugin(), undefined),
/**
* Watcher doesn"t work well if you mistype casing in a path so we use
* a plugin that prints an error when you attempt to do this.
* See https://github.com/facebookincubator/create-react-app/issues/240
*
* @env development
*/
ifDevelopment(new CaseSensitivePathsPlugin(), undefined),
/**
* 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.
* @url https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
* @env all
*/
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
/**
* Define environmental variables base on entry point
* @description Provides entry point specific env variables
*
* @env all
*/
new webpack.EnvironmentPlugin({
NAME: name,
pathinfo: options.development,
path: path.resolve(options.outputPath),
filename: `${options.filenames}.js`,
},
plugins: objectPath.get(options, 'plugins', []),
resolve: {
alias: {
vue$: 'vue/dist/vue.common.js',
},
},
module: {
rules: objectPath.get(options, 'module.rules', []),
},
});
config.plugins.push(plugins.define, new CaseSensitivePathsPlugin());
if (!options.development) {
config = config.merge({
devtool: false,
output: {
pathinfo: false,
},
plugins: [
new webpack.LoaderOptionsPlugin({ debug: false }),
new CleanPlugin(options.outputPath, process.cwd()),
],
});
}
return config;
}