我想很多人对于webpack都是不陌生的，比较前端三大框架都广泛使用到了webpack这个工具，但是学webpack有必要么，我个人也是持怀疑态度的，毕竟vue用的那么爽好像没怎么用到webpack这样的工具，但是有一点是毫无疑问的，那就是面试会问呀！面试会问呀！会问呀！呀！告诉我你有别的选择么？
目录
为什么需要webpack
说到这儿肯定要扯历史了，我们之前写 html ，js， css的方法其实很简单，写个html，里面去引大量的CSS和JS文件，这就带来了很大的麻烦,首先是js文件的引用顺序就很讲究,如果你写过flask,典型的例子就是jquery和bootsrap的引用顺序.就算你把所有的js写到一个文件中,又会出现很难维护的问题,况且这种面向过程的方法已经渐渐不适合当前的大环境.
因此webpack就有了其存在的意义,它可以打包你的js代码,同时又不仅仅局限于js代码,它可以让你使用类似common.js, es6import,amd,cmd等模块化的方法.
借快地方解释 cmd和amd的区别,也是不学真不行系列,我们知道自从js跳出浏览器之后,node.js广泛采用common.js的模块化组织方法,后来amd和cmd规范进一步做出了改进,此处借用此网站的代码,对于 common.js:
// Module/1.0
var a = require("./a"); // 依赖就近
a.doSomething();
var b = require("./b")
b.doSomething();对于amd写法:
define(["a", "b"], function(a, b){ // 依赖前置
a.doSomething();
b.doSomething();
})对于cmd写法:
define(function(require, exports, module){
var a = require("a");
a.doSomething();
var b = require("b");
b.doSomething(); // 依赖就近，延迟执行
})可以看到三者的不同主要在于下载时间和执行时间上,common.js是使用时下载执行,而amd是提前下载并执行,cmd则做到了提前下载,使用时执行.
当然历史的车轮总是滚滚向前的,webpack的出现成功的把所有的模块化标准囊括进来:
这里主要把webpack的核心功能过一下:
安装
对于这种工具当然是不推荐全局安装的了:
npm install webpack-cli -D这样查看版本的时候我们就要使用npx了:
npx webpack -v入口和出口
学webpack其实就是学怎么配置呀,那么工程自然要有一个入口的,进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的.
既然有入口,自然需要一个出口,出口即表示生成的文件放在哪里,取什么名字之类的:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
上面demo规定了入口文件和出口文件地址和名字.
loader
这是webpack核心的东西了,也是最多最烦人的,首先说 loader是干嘛的,很简单,我们使用vue的时候要打包的可不仅仅只有js文件,vue文件,css甚至jpg等各种各样的文件都是要打包的.而借助各种各样的loader,我们可以很简单的完成这样的打包.
loader的内容之多,三四篇也是讲不完的,大家需要的时候直接去对应地址找api即可.
模式
这个部分就很好理解了,如果你不配置mode的话,会默认给你配置为"production",效果就是我们熟悉的一行代码,变量等都是很简单的名字,相信大家都在dist里面看见过,因为production是放在生产环境之中的,自然可读性就不那么重要了.
还有一种development模式,我相信不用多说大家也知道是干嘛的了.
这篇文章主要让大家对webpack和模块化有一个大概的了解,不会牵扯更多的更深入的问题,主要希望能解决一些没有学过webpack的人的一些疑问.
如果想更深入去官网吧!