介绍 webpack

Posted 2021-04-29 web前端开发vue

它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

举个例子，现在有个脚本主文件 app.js 依赖了另一个脚本 module.js

// app.js
var module = require('./module.js')
... module.x ...

// module.js
exports.x = ...

则通过 webpack app.js bundle.js 命令，可以把 app.js 和 module.js 打包在一起并保存到 bundle.js

同时 webpack 提供了强大的 loader 机制和 plugin 机制，loader 机制支持载入各种各样的静态资源，不只是 js 脚本、连 html, css, images 等各种资源都有相应的 loader 来做依赖管理和打包；而 plugin 则可以对整个 webpack 的流程进行一定的控制。

比如在安装并配置了 css-loader 和 style-loader 之后，就可以通过 require('./bootstrap.css') 这样的方式给网页载入一份样式表。非常方便。

最后，对于之前提到的 Vue.js，作者也提供了一个叫做 vue-loader 的 npm 包，可以把 *.vue 文件转换成 webpack 包，和整个打包过程融合起来。所以有了 Vue.js、webpack 和 vue-loader，我们自然就可以把它们组合在一起试试看！