webpack的基础使用、配置以及文件处理方式（图文为主）（一）

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视频课程整理）