当开发者还在体验webpack3.x的后遗症时，webpack4.x已经悄然而至。

对于用户来说，最预期的问题如下：

新版本与旧版本相比有哪些变化？

从webpack3.x到web pack 4 . x的迁移？

使用webpack4.x需要注意什么？

网络包的新功能

webpack作为构建工具的优势在于：

很多独特的功能可以在webpack.config.js中配置；

其配置灵活多变；

但正因为如此，这也是它不好的一点。因为太随意，很难控制，造成以下问题：

学习、使用和研究webpack的成本太高(曲线太陡)；

构建一个小应用，还需要像构建一个大应用一样配置webpack.config.js(虽然麻雀虽小五脏俱全)；

webpack4.x作为webpack的新一代版本，极大地解决了存在的问题。

web pack 4 . x不能使用webpack.config.js配置文件

以下6个小步骤可以用来完成项目的建设：

创建一个项目目录(webpack-demo)，然后输入变更目录

mkdirwebpack-democdpwebpack-demo

初始化package.json文件

npminit-y

上传webpack和webpack-cli依赖项

npminstallwebpackwebpack-CLI-save-dev

将~/src/index.js文件添加到项目中(index.js为默认条目文件，默认条目目录为~/src。当然也可以自定义条目文件，需要将package.json中的主配置项修改到指定的文件中)

index.js的文件代码如下：

console.log('hellowebpack，')

打开package.json并在脚本配置项中添加以下代码：

脚本' :{

build':'webpack '

}

注意：这是NPM的脚本命令

运行npmrunbuild命令，然后会在项目中看到一个~/dist/main.js的文件。在命令窗口中，您应该会注意到以下警告提示：

警告配置

尚未设置“mode”选项，web packkwillfallback to“production”for his value，请将“mode”选项设置为“development”或“production”以启用toenabledefaultsforeachenvironment。

您可以将“none”设置为disable nydefaultbehavior . learn more :https://WebPack . js . org/concepts/mode/

忽略这个消息，我们发现webpack4.x的项目初始化配置和webpack3.x没有太大区别，但是webpack4.x缺少必要的webpack.config.js配置文件。

包装方式的改变

我们回头看看上面的提示信息，意思是：‘如果没有设置打包模式的配置项，那么默认的打包模式是生产模式，对于开发模式，需要配置模式配置项’。说了这么多，我想所有读者都应该明白，webpack4.x增加了很多默认的配置项，对于不懂webpack或者小应用开发场景的人来说，省时省力。

但是在实际应用中，我们经常区分开发模式和生产模式，但在webpack4.x中并不难，只要对package.json中的脚本做如下修改即可：

脚本' :{

Dev' :' web pack模式开发'，//用于开发模式

生成' : '网络包模式生产'//用于生产模式

}

是的！Webpack4.x就这么简单。我们不需要像webpack3.x那样定义两个配置文件，开发模式和生产模式。

重载默认配置项入口/出口

没有了配置文件webpack.config.js，不仅减少了我们的配置工作量，也给我们带来了一些问题。比如：入口/出口怎么定制？

没有webpack.config.js，我们可以在命令行中添加进入/退出配置项，代码如下：

脚本' :{

Dev' :' webpack模式开发。/src/entry.js-output。/dist/bundle.js '，//用于开发模式

构建' :' webpack模式生产。/src/entry.js-output。/dist/bundle . min . js '//用于生产模式

}

只是一个不使用webpack.config.js的解决方案

以上是webpack4.x带来的整体变化.

但是原webpack.config.js配置文件中的模块和插件配置项中的功能仍然需要使用webpack.config.js，虽然webpack团队的计划是配置一些常用的加载器和插件，但是只实现了UGLIFY JS插件内置插件，可以压缩*。js代码，而不在生产模式中引入它。其他加载器和插件只能通过webpack.config.js引入

webpack的迁移和注意事项

看到webpack4.x中的这些变化，很多人不仅会问从webpack3.x到webpack4.x的迁移是不是很麻烦，其实并不麻烦。webpack4.x向后兼容webpack.3x.

为了不引入webpack.config.js，我们使用了npm脚本。当时和入口/出口重载一样，我们也可以在webpack.config.js的配置文件中完成，配置和原来差不多，但是webpack4.x有以下需要注意的问题：

升级到webpack4.x，你会发现使用extract-text-webpack-plugin来分隔*时经常会出现错误。css文件，这是extract-text-webpack-plugin本身的问题。官方建议使用迷你css-extract-plugin来避免这个问题，但是使用迷你css-extract-plugin的一个限制是webapck必须是4

那个。用babel-loader转换ES6-ES5时不会需要babelrc配置文件，只需要在package.json的脚本中添加-module-bind js=babel-loader就可以完成babel-loader的配置。

其他加载器和插件没什么变化。其实这就快结束了。这是一个用webpack4.x构建的演示

webpack4.x演示

紧接在配置之上：

首先添加html-wepback-plugin和html-loader依赖项：

npminstallhtml-web pack-plugin html-loader-save-dev

Html-webpack-plugin生成Html文件(html文件用于加载和打包生成bundle.js文件)。当然，也可以使用webpack支持的各种模板加载器。这里，*。html加载器支持的html模板用于生成。

其次，添加迷你css-extract-plugin和css-loader依赖项：

npminstallmini-CSS-extract-plugin ss-loader-save-dev

加载器和插件配置类似于webpack3.x，您也可以在下面提供的代码中参考webpack.config.js文件。

然后，添加巴别塔-加载器，@巴别塔/巴别塔-核心和@巴别塔/巴别塔-预设依赖关系：

npminstall @ babel/core babel-loader @ babel/preset-env-save-dev

加载器和插件配置类似于webpack3.x，你也可以参考下面提供的源代码中的webpack.config.js文件。

如下修改package.json中的脚本：

脚本' :{

dev ' : ' web pack-mode development-module-bindjs=babel-loader。/src/entry.js - output。/dist/bundle.js '，

build ' : ' web pack-mode production。/src/entry . js-module-bindjs=babel-loader-output。/dist/bundle.min.js '

},

最后，添加webpack-dev-server依赖关系来修改项目文件并及时刷新浏览器

npminstallwebpack-dev-服务器

在package.json中，脚本的dev可以用webpack-dev-server替换webpack，代码如下：

脚本' :{

dev ' : ' web pack-dev-server-mode development-module-bindjs=babel-loader。/src/entry.js - output。/dist/bundle.js '，

build ' : ' web pack-mode production。/src/entry . js-module-bindjs=babel-loader-output。/dist/bundle.min.js '

},

这么简单的演示就完成了。

其他加载器和插件配置类似于webpack3.x.

本文转载自中文网站