webpack4.0 的配置及简单使用

webpack

学习 webpack 能极大的扩充前端开发视野,所以推荐前端开发工程师,使用 webpack 构建工具。

webpack 4.0 相对于之前的版本,有了更多的变化,开发速度更快,大型项目能节约 90% 的构建时间。

webpack 4.0 内置了更多的默认配置,变更了许多 API

webpack 的简单介绍

在面向对象的编程思想出现以前,我们都是使用面向过程的方式做网页开发的。要向页面中添加一些内容,必须要挨个创建,挨个编写内容,然后挨个添加,如果页面中的内容一多,就要编写很多雷同的代码,很容易形成代码冗余。

这个时候就出现了面向对象的编程思想,可以把页面中的内容按模块分装单独的业务逻辑文件。

面向对象要求将每个模块封装成对应的类,想要使用这个模块(如table)时,从这个类中实例化一个对象即可,大大提高了代码的可维护性。

但是如果划分的模块很多很大,每个类要单独写在一个 JS 文件中,这样一个页面中引入的 JS 文件次数就会变多,页面会产生代码冗余,并且会增加服务器的加载负荷。而且这样加载时,无法准确的知道项目的层级关系,还是不好管理。报错不好调试。

所以我们希望,如果要在某个入口 JS 文件中使用其他 JS 文件的代码,不用将这么多的 JS 文件都引入同一个 HTML,在 JS 入口文件中自己引入其他 JS 文件,也就是 JS 文件之间可以互相引入,在 HTML 页面中只引入逻辑入口文件。

这样做的好处:

  • 不需要在 HTML 中引入很多的 JS 文件,提高文件加载速度。
  • 文件和文件之间的依赖关系会变得很明确,降低出错率,提高代码的可维护性。

ES6 Module 的语法可以提供这些功能:

import Header from './Header'
import Sidebar from './Sidebar'
import Content from './Content'
/*
...
 */

但是浏览器并不识别这样的语法,需要做特殊的设置。 除了可以将

你可能感兴趣的:(webpack,4.0,前端开发)