webpack

中文官网 英文官网

webpack 基本概念

为什么要学习webpack webpack 它是 vue-cli 的底层实现原理，学习了它，可以更加方便的去使用 vue-cli(现在基本不用了) webpack 的作用 vue-cli 搭建的项目有哪些功能：可以运行为一个服务器可以进行实时更新 代码修改之后，保存，页面会自动更新 可以解析 css 文件 import 'xx.css' 可以解析 .vue 文件… 上述的这些功能，其实都是 webpack 来实现的 webpack 怎么用 配置文件 功能集合 配置项 可配置的信息 loader 打包的第三方包 plugin 扩展功能

webpack 的使用

问题：

表现 & 原因：模块化之后的代码浏览器是无法执行的

解决方案：

如果希望模块化后的 js 代码可以被浏览器执行，可以使用 webpack 将模块化后的代码进行打包，再将打包好的代码交给浏览器将浏览器去执行就可以了。

作用：用来打包资源

表样式脚本图片

打包流程

模块化的项目，以一个 js 文件为入口，分别导入其它的文件（.js，图片， 样式…）形成了一个模块化的项目。webpack 可以将这个模块化的模块进行打包，将 js & 样式 & 图片进行打包，打包之后可以直接运行在浏览器上。

webpack的使用—步骤

初始化项目（生成package.json文件） npm init -y 安装webpack 注意：新版本的webpack不支持IE8 npm install --save-dev webpack@4.44.2 // 安装 webpack npm install --save-dev webpack-cli@3.3.12 // 安装 webpack 的 cli 配置 package.json { "scripts": { "start": "webpack ./要打包的文件名" } } 打包 npm run start

修改导入路径

将 index.html 中导入的 js 替换为 dist 目录中的 js

注意点 0.0 webpack 可以打包模块化的项目1.0 一旦运行 npm run start 会将 src 目录下所有的内容打包到 dist 目录中2.0 在index.html 中不再导入 src 目录下的文件，而是导入 dist 目录下的内容3.0 src 下的文件依旧是模块化的项目， dist 下的是通过 webpack 打包之后的结构，不再是模块化的结构了（浏览器可以直接运行。）4.0 问题： 下载第三方包时不成功： 将下载的工具从 npm 改为 cnpm 下载直接报错： 不要将文件夹的名称取名为：webpack修改 src 的内容之后，需要重新打包才能起作用

webpack的使用—npm run

npm run start：会去当前运行的目录下找到 package.json 中的 script 下的 start 指令并且执行

webpack的使用—使用配置文件

官方文档

由于将来在项目中可以修改的参数（配置项）非常多，如果分散在不同的地方，要修改就太麻烦了。为了解决这样的问题，可以使用 webpack 中的配置文件来管理这些需要修改的参数 在项目的根目录下创建一个文件名为： webpack.config.js在配置文件中添加代码 const path = require('path'); module.exports = { entry: './src/main.js', }; 配置package.json 文件 { "scripts": { "start": "webpack --config webpack.config.js" } } 删除 dist 目录重新打包 npm run start

注意点：

npm run start： npm run 要运行 package.json 中 scripts 下面的指令start：找到 package.json 中的 scripts 下面的 start 对应的指令，并且执行 webpack --config webpack.config.js

配置项

配置文件 - 入口

设置项目的入口文件 *

配置文件 - 出口

设置项目打包后生成的文件名

配置文件 - 项目的模式

项目模式的区分：

开发模式（development）：

概念：程序员在这个过程中进行代码的开发

特点：

保证代码的完整性，以方便程序进行代码的修改

生产模式（production ）：

概念：程序员的代码已经开发完成，项目已经发布上线了，已经投入生产使用

特点：

代码运行稳定，代码体积尽可能的小（删除空格换行缩进）

mode：（项目的模式）

development：开发模式production：生产模式（默认值）

配置文件 - 解析

resolve：

alias： 别名 @ ：表示的是 src 目录 ,它就是用 alias 来配置的

extensions：可省略的后缀名

在导入文件时，每个文件都有自己的后缀，可通过它来配置可省略的后缀默认情况下 js 后缀可以省略（除了 js 之外其它的都不能省略）

配置文件 - 源码映射

打包后的项目报错信息是不准确的，可以使用源码映射来解决这个问题

开启源码映射： 特点：

1.0 一旦项目开启源代码映射，会将原本的代码原本信息也保存一份到打包的目录下。 问题：在加载资源时， main.js 太大了，有一部分没有意义，会消耗性能。解决方案： 将源码生成到别的文件中： devtool: 'source-map'

注意点：

项目的配置文件其实是基于 nodejs 的我们说 webpack是基于 nodejs 的

总结：

webpack 中的配置项其实有很多： 传送门我们只是挑选了其中用的比较多的来进行讲解，如果后续我们遇到其它的配置可以通过传送门去查看

loader

webpack 默认仅仅只能打包 js 文件，无法打包 其它文件（图片，样式，字体 …）.如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。

loader - 作用

作用：

webpack 默认只能打包 js 文件，无法打包其它文件（样式，字体，图片）。如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。

特点：

所有的 loader 都是第三方包，可以帮助 webpack 打包其它资源不同的 loader 打包的文件是不一样的

loader - style-loader&css-loader

可以用来帮助 webpack 打包 .css 文件 传送门 安装打包 css 的 loader npm install --save-dev style-loader css-loader 配置 Loader (webpack.config.js) entry: '', output: {}, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', // 将样式使用到页面中 'css-loader' // 将样式打包到 dist 目录下 ] } ] } } 重新打包 npm run start

注意点：

1.0 大部分的 loader 在使用时步骤都是三步： a. 下载 loaderb.配置 loaderc.重新打包 2.0 打包样式时用到了 style-loader & css-loader： css-loader：将 css 中的样式打包到了 dist 目录下的文件中了style-loader：将打包后的 css 文件在运行时，添加到页面的头部中以 style 标签进行包裹 3.0 style-loader 与 css-loader 的书写顺序不能改变

loader - less-loader

在写项目时，一般会使用 less 语法来书写样式。less 如果需要打包要借助第三方包： less-loader

传送门

使用 less 在 style 中创建一个 less.less添加 less 的样式在 src/index.js 中导入这个 less

打包 less 的步骤：

1.0 安装第三方包 npm install --save-dev less-loader less 2.0 配置 loader (webpack.config.js 中完成的) module.export = { module: { rules: [{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }] } }

3.0 重新打包

loader - sass-loader

用来打包 sass 文件的

使用 sass 文件：

创建一个 sass 文件（注意点：所有的 sass 文件为了防止跟其它文件冲突，后缀名统一写为 .scss )

完成 sass 的代码

在 index.js 中使用 打包 sass 的步骤：

1.0 下载第三方包2.0 配置第三方包3.0 重新打包

loader - file-loader

可以用来打包图片 & 字体

打包图片：

使用图片 在 html 中添加一个容器给容器设置样式：设置一个背景图片 打包图片： 1.0 下载第三方包2.0 配置第三方包3.0 重新打包 注意点： 1.0 会将图片打包到 dist 目录下2.0 将静态文件：public/index.html 拷贝到 dist 目录下 导入 的js文件的路径也要做相应的修改

打包字体：

使用字体(使用 bootstrap 中的字体文件) 下载 bootstrap （版本号：3.3.7）导入 bootstrap 的样式使用字体图标 打包字体： 1.0 下载第三方包2.0 配置第三方包3.0 重新打包

loader - babel-loader

将 es6 语法打包为 es5 语法 下载第三方包 npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev 配置第三方包 module: { rules: [ { test: /\.js$/, // 将后缀名为 js 的文件进行 es6 转 es5 的处理 exclude: /node_modules/, // 处理的目录不包括 node_modules use: { loader: 'babel-loader', // 使用 babel-loader 来处理 options: { presets: ['@babel/preset-env'] // 固定写法 } } } ] }

重新打包

最新的 webpack 已经放弃了 ie 浏览器（不会再将 es6 转 es5,所以如果要上述的代码起作用，应该将 webpack 的版本降级为 4.x）

loader - vue-loader

默认情况下 webpack 无法打包后缀名为 .vue 的文件、如果要打包需要借助第三方包： vue-loader

使用 .vue 文件：

1.0 下载第三方包： vue2.0 创建一个 App.vue 文件3.0 完成 App.vue 文件的内容 template & style & script 4.0 在 main.js 中 导入 Vue导入 App.vue创建一个 vue 实例将 App.vue 挂载到 vue 实例中 打包 .vue 的过程： 安装第三方包 npm install -D vue-loader vue-template-compiler 配置 Loader （webpack.config.js） // 导入 Loader const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // 配置 loader { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 将 vue-loader 作为插件来使用 new VueLoaderPlugin() ] } 重新打包 npm run start

注意点：

vue-loader 的说明文档不在 webpack 中，因为 vue-loader 是属于 vue 的全家桶系列。如果要找去 vue 的官网中去找

总结：

loader 与配置项一样，也有很多不同的 loader， 我们只是学习了一些常用的 loader，其它的可以参考 传送门webpack： 配置项：可以用来配置项目的相关信息loader：可以用帮助 webpack 打包额外的资源

插件

给 webpack 提供额外的功能

插件 - HtmlWebpackPlugin

修改内容之后，重新打包好 dist 目录下的内容之后，还需要将 index.html 从pulibc下拷贝到 dist 目录下，太麻烦了。

问题：我不希望每次重新打包 dist 目录之后再将 index.html 拷贝到 dist 目录下。

解决方案：可以使用 HtmlWebpackPlugin

作用：可以在 dist 目录中自动生成一个 html 文件

使用步骤： 下载插件 npm install --save-dev html-webpack-plugin 配置插件（webpack.config.js 中完成的） // 导入插件 const HtmlWebpackPlugin = require('html-webpack-plugin') // 配置插件 module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: '', // 生成的静态文件名称 template: '' // 以谁为模板生成的静态页面 }) ] } 重新打包: npm run start

注意点：

自动生成的 html 文件有以下特点： 会自动将模板中的内容全部复制一份会自动在文件的末尾添加入口文件的引用 <script src="main.js"></script>

插件 - clean-webpack-plugin

每次重新打包项目时一定要删除 dist 目录

问题：每次都删除，太麻烦了。解决这个问题可以使用：clean-webpack-plugin

作用：用来清除 dist 目录

步骤：

下载插件 npm install clean-webpack-plugin --save-dev 配置插件 // 导入插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 配置插件 module.exports = { plugins： [ new CleanWebpackPlugin() ] } 重新打包

注意点：

1.0 插件会帮助自动清除 dist 目录2.0 以后如果有能力看文档时，尽量用英文文档

插件 - webpack-dev-server

可以开启一个服务器，具有实时更新的功能

作用：可以开启一个服务器，具有实时更新的功能

下载插件 npm install --save-dev webpack-dev-server 配置插件（webpack.config.js） module.exports = { devServer: { contentBase: './dist' }, } 配置指令：(package.json) { "scripts": { "start": "webpack --config webpack.config.js", "serve": "webpack-dev-server --open" } } 开启服务器：npm run serve

注意点：

开启服务器之后，修改完代码之后是不需要自己重新打包， 手动刷新页面的（服务器可以做到时实更新）webpack-dev-server插件在使用时，默认使用的默认文件的名称为： webpack.config.js

插件 - 模块的热替换

修改 css 之后，可以让页面不 刷新直接更新修改的样式 module.exports = { devServer: { contentBase: './dist', hot: true, // 开启模块的热替换 }}

注意点：

配置文件中的配置项发生修改之后需要重启服务才能生效

总结：

插件的作用是给 webpack 提供额外的功能插件的种类不单单只有以上几种还有很多，详情请见： 传送门webpack 配置项：配置项目中的相关信息loader：配置打包信息plugin：配置额外功能

打包

说明：在项目中的 package.json 中有两个指令：

"serve": "vue-cli-service serve": 将项目的服务器启动起来 "build": "vue-cli-service build":将项目进行打包 运行指令： npm run build得到生成的 dist 目录： 这个目录就是我们需要的上线的文件