哈Ha！ 今天，我将向您介绍将代码分离成单独模块的Webpack 4，以及一些有趣的解决方案，这些解决方案将帮助您更快地构建webpack 4程序集。最后，我将为我的基本webpack程序集提供最必要的工具，稍后您可以使用扩展。 该程序集将帮助您理解本材料，还可以帮助您更快地编写实现并更快地解决可能的问题。
该程序集的主要思想是正确分隔配置文件中的代码，以便于使用，阅读和清理webpack.config.js。 开发版本和生产版本的必要模块和插件（以及主文件中的功能分离）将位于单独的webpack文件夹中，并从该文件夹中导入以连接到主配置。
为什么需要这种方法？
随着您的程序集在Webpack上构建的模块，插件等数量的逐渐增加，配置文件将突飞猛进。 随着时间的流逝，该文件变得难以阅读，并且如果未使用某些模块，则针对特定项目进行更改会变得更加困难，但是您需要通用的东西。 因此，需要对代码进行清晰的组织。
我们需要什么？
我们将使用
webpack-merge插件。
我们创建webpack文件夹，并将所有单个模块取出到单独的文件中。 例如，webpack / pug.js，webpack / scss.js并从中导出这些功能。
Pug.js文件module.exports = function() { return { module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true, }, }, ], }, }; };
webpack.config.js文件 。 在此文件中，我们将它们连接起来，借助此插件，我们可以方便快捷地进行连接。
const merge = require('webpack-merge'); const pug = require('./webpack/pug'); const common = merge([ { entry: { 'index': PATHS.source + '/pages/index/index.js', 'blog': PATHS.source + '/pages/blog/blog.js', }, output: { path: PATHS.build, filename: './js/[name].js', }, plugins: […], optimization: { … }, }, pug(), ]);
现在，如果我们有一个新任务，我们需要一个新模块，插件，加载程序，然后将其传输到酒店模块（文件）并将其放在webpack文件夹中，然后将其连接到主配置文件，并保持配置尽可能整洁。
生产和开发设置
现在，借助banif if的帮助，我们将完成我们的目标分离，并针对这两种开发类型配置webpack，最终使使用此工具变得非常方便，并且将来，我们将能够灵活，简单地为其他任何项目配置它，或在当前版本中扩展。 要导出到webpack 4中的节点（对于webpack本身），我们使用以下构造：
module.exports = function(env, argv) { if (argv.mode === 'production') { return merge([ common, extractCSS(), favicon(), ]); } if (argv.mode === 'development') { return merge([ common, devserver(), sass(), css(), sourceMap(), ]); }
在通用对象中，我们连接产品和开发中使用的模块，在条件下，我们仅连接这些情况下必需的模块。
现在我想谈谈关于webpack 3的webpack 4的主要功能
- 为了快速入门，webpack 4不需要webpack.config.js，现在只需要一个入口点（index.js）
- 在新版本中，webpack命令行界面位于单独的软件包中，您需要安装webpack-cli。
- 要运行webpack 4，您需要在脚本中（否则将发出警告）在脚本中指定模式（操作模式）-模式生产或-模式开发，具体取决于按键，webpack的操作会发生变化。 开发模式旨在加快构建速度。 在生产版本中，所有目的都是为了最终缩小代码。
- 为了创建common.js和common.css文件，不再使用CommonsChunkPlugin，现在由splitChunks负责，并使用以下构造：
optimization: { splitChunks: { cacheGroups: { 'common': { minChunks: 2, chunks: 'all', name: 'common', priority: 10, enforce: true, }, }, }, },
在webpack 3中-在插件中也是如此：
new webpack.optimize.CommonsChunkPlugin({ name: 'common ', })
因此，在HtmlWebpackPlugin中的块中，我们进行连接（此处没有更改）。
plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index', 'common'], template: PATHS.source + '/pages/index/index.pug', }), ],
- 下一个要点，为了创建sourceMap，我们现在使用以下方法-在webpack文件夹中创建sourceMap.js文件，然后以开发版本为例进行连接（如上所述）：
module.exports = function() { return { devtool: 'eval-sourcemap', }; };
现在，
插件方法
：[new webpack.optimize.UglifyJsPlugin（{}）]不起作用。
借此，我想完成我的故事并提供我的基本组装-Webpack 4的
链接 ，这可能会帮助您进行工作和开发。 感谢您的关注！