1.简介
webpack是一个现代的js应用的静态模块打包工具
前端模块化
■前端模块化:
- 在前面学习中,我已经用了大量的篇幅解释了为什么前端需要模块化。
- 而且我也提到了目前使用前端模块化的一些方案: AMD、CMD、CommonJS、 ES6。
- 在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。
- 并且在通过模块化开发完成了项目后,还需要处理模块间的各 种依赖,并且将其进行整合打包。
- 而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
- 而且不仅仅是JavaScript文件,我们的CSS、图片、json文件 等等在webpack中都可以被当做模块来使用(在后续我们会看
到)。 - 这就是webpack中模块化的概念。
■打包如何理解呢?
- 理解了webpack可以帮助我们进行模块化,并且处理模块间的各种复杂关系后,打包的概念就非常好理解了。
- 就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
- 并且在打包的过程中,还可以对资源进行处理比如压缩图片,将scss转成css ,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作
- 但是打包的操作似乎grunt/gulp也可以帮助我们完成,它们有什么不同呢?
和grunt/gulp的对比
■grunt/gulp的核心是Task
- 我们可以配置一系列的task ,并且定义task要处理的事务(例如ES6、ts转化 ,图片压缩, scss转成css )
- 之后让grunt/gulp来依次执行这些task ,而且让整个流程自动化。
- 所以grunt/gulp也被称为前端自动化任务管理工具。
■我们来看一 个gulp的task
- 下面的task就是将src下面的所有js文件转成ES5的语法。
- 并且最终输出到dist文件夹中。
■什么时候用grunt/gulp呢?
- 如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念。
- 只需要进行简单的合并、压缩,就使用grunt/gulp即可。
- 但是如果整个项目使用了模块化管理,而且相互依赖非常强,我们就可以使用更加强大的webpack了。
■所以, grunt/gulp和webpack有什么不同呢?
- grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心。
- webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能、是他附带的功能。
const gulp = require('gulp');
const babel = require(' gulp-babel');
gu1p.task('js',() =>
gulp.src('src/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gu1p. dest('dist'))
);
2.安装
- 安装webpack首先需要安装Node.js , Node.js自带了软件包管理工具npm
- 查看自己的node版本:
node -v
- 全局安装webpack(这里我先指定版本号3.6.0 ,因为vue cli2依赖该版本)
npm install webpack@3.6.0 -g
- 局部安装webpack (后续才需要)
–save-dev是开发时依赖,项目打包后不需要继续使用的。
cd对应目录
npm install webpack@3.6.0 --save -dev
- 为什么全局安装后,还需要局部安装呢?
webpack --version
检查有没有安装
在终端直接执行webpack命令,使用的全局安装的webpack
当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack
3.起步
文件和文件夹解析:
- dist文件夹:用于存放之后打包的文件
- src文件夹:用于存放我们写的源文件
main.js :项目的入口文件。具体内容查看下面详情。
mathUtils.js :定义了一些数学工具函数,可以在其他地方引用,并且使用。 - index.html :浏览器打开展示的首页html
- package.json :通过npm init生成的, npm包管理的文件(暂时没有用上,后面才会用上)
js文件的打包
■现在的js文件中使用了模块化的方式进行开发,他们可以直接使用吗?不可以。
- 因为如果直接在index.html引I入这两个js文件,浏览器并不识别其中的模块化代码。
- 另外,在真实项目中当有许多这样的js文件时,我们一个个引用非常麻烦,并且后期非常不方便对它们进行管理。
■我们应该怎么做呢?使用webpack工具,对多个js文件进行打包。
- 我们知道。webpack就是一个模块化的打包工具,所以它支持我们代码中写模块化.可以对模块化的代码进行处理。
- 另外,如果在处理完所有模块之间的关系后,将多个js打包到-个js文件中 ,引入时就变得非常方便了。
■OK ,如何打包呢?使用webpack的指令即可
webpack src/main.js dist/bundle.js
4.配置
我们考虑,如果使用webpack的命令都需要协商入口和出口作为参数,就很麻烦,有没有一个方法可以将两个参数写到配置中,在运行时可以直接读取,为此,我们创建一个 webpack.config.js文件
运行还可能出现这个链接里的bug,尝试运行如下代码
webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js
webpack ./src/main.js -o ./dist/bundle.js
如何解决这个问题呢,将path改为如下情况
打包后的bundle.js文件在index.html页面引用即可
package.json中定义启动
■每次执行都敲这么-长串有没有觉得不方便呢?
我们可以在package.json的scripts中定义自己的执行脚本。
■package.json中的scripts的脚本在执行时,会按照一定的顺序寻找命令对应的位置。
- 首先,会寻找本地的node_ .modules/.bin路径中对应的 命令。
- 如果没有找到,会去全局的环境变量中寻找。
- 如何执行我们的build指令呢?
npm ruin build
这个package.json里面内容不对的问题可能是软件问题,试试换个软件试试,我用webstorm有问题,用idea打开就没问题了
这个运行结束之后会有一个node_module文件夹
每次打包都写一遍webpack ./src/main.js -o ./dist/bundle.js很不方便
局部安装webpack
■目前,我们使用的webpack是全局的webpack ,如果我们想使用局部来打包呢?
- 因为一个项目往往依赖特定的webpack版本,全局的版本可能很这个项目的webpack版本不一致,导出打包出现问题。
- 所以通常一个项目,都有自己局部的webpack.
■第-步。项目中需要安装自己局部的webpack
- 这里我们让局部安装webpack3.6.0
- vue cl3中已经升级到webpack4。但是它将配置文件隐藏了起来,所以查看起来不是很方便。
npm install webpack@3.6.0 --save- dev
■第二步,通过node. modules/.bin/webpack启动webpack打包
在终端或者dos中运行的webpack是全局的
可以./node_modules/webpack
,就能执行本地得了
5.loader的使用
但是css直接打包会报错
要加载相应的css文件必须有对应的loader
https://webpack.js.org/
安装配置文件
npm install --save-dev css-loader
补充配置内容
完成之后在npm run build一下
- 因为css-loader只负责将css文件进行加载,而style-loader负责将样式添加到Dom中
- webpack在读取使用的loader的过程中,是按照从右到左的顺序读取的
所以再下载style-loader配置文件
npm install --save-dev style-loader
less文件处理
安装对应的loader
npm install --save-dev less-loader less
webpack.config.js中修改配置,添加完后npm run build
less文件
main.js中添加依赖
index.html运行效果(注意要script引入bundl.js文件)
图片文件处理
(11.png<limit<timg.jpg)
安装loader
npm install --save-dev url-loader
修改配置文件
npm run build
运行,
出现报错Module build failed: Error: Cannot find module 'file-loader'
当加载的图片大于limit的时候,需要使用file-loader模块进行加载(这事我已经把11.png换成timg.jpg了,所以出现大于limit情况)
安装loader
cnpm install --save-dev file-loader
npm run build运行,图片打包完成
(小于limit打包时不出现?????????????
我打包dist里的img没有11的打包图片运行也显示了)
- 我们发现webpuck自动帮助我们生成一个非常长的名字
这是一个32位hash值。日的是防止名字重复
但是,真实开发中,我们可能对打包的图片名字有-定的要求
比如,构所有的图片放在一个文件央中 ,跟上图片原来的名称,同时均要防止重复 - 所以,我们可以在options中添加上如下选项:
img:文件要打似到的文件夹
name :获取国片原来的名字。放在该位置
hash:8 :为了防止图片名称冲突.依然使用hash ,但是我们只保留8位
ext:使用面片原来的扩展名
文件要打包到的文件夹/[获取图片原来的名字,放在该位置].[哈希值].[图片原来的扩展名]
- 但是,我们发现阻片并没有显示出来,这是因为图片使用的路径不正确
默认情况下, webpack会将生成的路径直排返国给使用着
但是,我们整个程序是打因在dist文件快下的,所以这里我们需要在路径下再添加一个dist/
npm run build(注意把之前名乱码的图片,先删除)
index.html运行,背景修改完成
.ES6语法处理
■如果你仔细阅读webpack打包的js文件,发现写的ES6语法并没有转成ES5 ,那么就意味着可能-些对ES6还不支持的浏览器没有办法很好的运行我们的代码。
■在前面我们说过,如果希望将ES6的语法转成ES5 ,那么就需要使用babel,而在webpack中,我们直接使用babel对应的loader就可以了。--save-dev
是连在一起的
cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015
■配置webpack.config.js文件
■重新打包npm run build
,查看bundle.js文件,发现其中的内容变成了ES5的语法(可以看到ES6里的const都变成var了)
(以上内容根据微博“coderwhy”的vue视频课程整理)