本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于webpack4新增了哪些东西?需要注意些什么?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。在开发人员还在体会webpack3.x的余韵时,webpack4.x已经悄然而来。
而对使用者来说,最期待的问题无外乎如下:
新版本与旧版本相比都有哪些改变?
webpack3.x到webapck4.x的迁移?
使用webpack4.x我们应该注意什么?
webpack的新特性
webpack 作为构建工具的强大之处在于:
可以在 webpack.config.js 中配置很多独特的功能;
它的配置灵活多变;
但正因为这样,这也是它的糟点。因为太随意,所以不好控制,造成了如下的问题:
学习、使用、研究webpack的成本过高(进阶曲线太陡);
构建一个小应用也需要像构建大应用那样配置 webpack.config.js(麻雀虽小五脏俱全);
而webpack4.x作为新一代版本 webpack ,它的出现极大的解决了现有的问题。
webpackk4.x可以不使用 webpack.config.js 配置文件
可以使用下面6小步完成项目的构建:
创建一个项目目录(webpack-demo),然后进入改目录
mkdir webpack-demo && cd webpack-demo
初始化 package.json 文件
npm init -y
加载 webpack 和 webpack-cli 依赖
npm install webpack webpack-cli --save-dev
在项目中添加 ~/src/index.js 文件(index.js 是默认的入口文件,默认入口目录为~/src,当然你也可以自定义入口文件,需要修改 package.json 中的 main 配置项为指定的文件)
index.js 文件代码如下:
1 |
|
打开 package.json 在 scripts 配置项中添加如下代码:
1 2 3 |
|
注:这就是NPM的 scripts 命令
运行 npm run build 命令,之后在项目中你将看到一个 ~/dist/main.js 的文件。在命令窗口你因该注意到如下的警告提示:
1 2 3 |
|
忽略这条提示信息,我们发现webpack4.x的项目初始化配置和webpack3.x没什么大的区别,但是webpack4.x少了必须要的 webpack.config.js 配置文件。
打包模式的改变我们再回头查看上面这个提示信息,它的意思就是说:‘如果没有设置打包模式这个配置项,那么默认的打包模式为生产模式(production),而对于开发模式(development),需要配置 mode 配置项’,说到这里,我想各位看官应该明白了webpack4.x增加了很多默认配置项,针对不了解webpack的人员或小应用开发的场景,这样做无异省时省力。
但实际应用中,我们往往还是区分开发模式和生产模式,但这在webpack4.x中也不是什么难事儿,只要修改 package.json 中的 scripts 如下:
1 2 3 4 |
|
‘对!webpack4.x就是这么简单’。我们不需要像webpack3.x那样分别定义开发模式和生产模式这样两份配置文件。
重载默认的配置项入口/出口没有了配置文件 webpack.config.js ,在减少了我们的配置工作量同时,也给初窥门径的我们带来了一些疑问。例如:如何自定义入口/出口?
在没有 webpack.config.js 的情况下,我们可以在命令行中添加入口/出口配置项,代码如下:
1 2 3 4 |
|
这只是不使用 webpack.config.js 的一种方案。
相关阅读 >>
更多相关阅读请进入《webpack4》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者