webpack

在网页中会引用哪些常见的静态资源？

JS（ .js .jsx .coffee .ts ）

CSS（ .css .less .sass .scss ）

Images（ .jpg .png .gif .bmp .svg ）

字体文件（Fonts）（ .svg .ttf .eot .woff .woff2 ）

模板文件（ .ejs .jade .vue ）

当前 Web 开发面临的困难

网页中，大量静态资源的引入，通常会面临什么困境？

文件依赖关系错综复杂

静态资源请求效率低

模块化支持不优化

浏览器对高级 JavaScript 特性的兼容程度较低

...

=> webpack，是一个流行的前端项目自动化构建工具（打包工具），可以解决当前 web 开发中所面临的困境。

webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 JS 兼容问题、性能优化等强大的功能，从而让前端程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

目前，绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

webpack 的基本使用（一）

[1] Demo：列表隔行变色项目 // ES6 语法的浏览器兼容性问题

新建项目空白目录，并运行 npm init，初始化项目包管理配置文件 package.json

新建 src 源代码目录，然后，在此目录下新建 index.html 首页

初始化首页的基本结构

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>隔行变色</title> <script src="./index.js"></script> </head> <body> <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行变色</title>
<script src="./index.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
</body>
</html>

运行 npm install jquery --save 命令，安装 jQuery

通过模块化的形式，实现列表隔行变色效果

// index.js import $ from 'jquery' // 问题在于：兼容性问题 - 浏览器可能不支持ES6语法 $(function(){ $('li:odd').css('backgroundColor','pink') $('li:even').css('backgroundColor','blue') })

1
2
3
4
5
6
7

// index.js
import $ from 'jquery' // 问题在于：兼容性问题 - 浏览器可能不支持ES6语法

$(function(){
$('li:odd').css('backgroundColor','pink')
$('li:even').css('backgroundColor','blue')
})

[2] 在项目中安装和配置 webpack

运行 npm install webpack webpack-cli --sav-dev 命令，安装 webpack 相关的包

在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件

在 webpack 的配置文件中，初始化如下基本配置：

export default { // 编译模式 mode:'development' }

1
2
3
4

export default {
// 编译模式
mode:'development'
}

在 package.json 配置文件的 scripts 节点下，新增 dev 脚本，如下：

"scripts": { "dev":"webpack" },

1
2
3

"scripts": {
"dev":"webpack"
},

在终端中运行 npm run dev 命令，启动 webpack 进行项目打包

在 index.html 中引入 webpack 打包后的 .js 文件（打包后，解决了 ES6 语法兼容性问题），查看页面效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>隔行变色</title> <script src="../dist/main.js"></script> </head> <body> <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行变色</title>
<script src="../dist/main.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
</body>
</html>

webpack 的基本使用（二）

[1] 配置打包的入口和出口

webpack 的 4.x 版本中默认约定：

打包的入口文件为 src -> index.js

打包的输出文件为 dist -> main.js

如果要修改打包的入口和出口，可以在 webpack.config.js 中新增如下配置信息：

const path = require('path'); // node.js 中操作路径的模块 module.exports = { mode:'development', // 编译模式，development 或 production entry:path.join(__dirname,'./src/index.js'), // 打包入口文件的路径 output:{ path:path.join(__dirname,'./dist'), // 输出文件的存放路径 filename:'bundle.js' // 输入文件的名称 } }

1
2
3
4
5
6
7
8
9
10

const path = require('path');    // node.js 中操作路径的模块

module.exports = {
mode:'development',    // 编译模式，development 或 production
entry:path.join(__dirname,'./src/index.js'),  // 打包入口文件的路径
output:{
path:path.join(__dirname,'./dist'),  // 输出文件的存放路径
filename:'bundle.js'    // 输入文件的名称
}
}

[2] 配置 webpack 的自动打包功能

说明：修改 index.js 中的代码后，需要重新打包编译后，效果才能生效，太麻烦了！So，可以这样做：

运行 npm install webpack-dev-server --save-dev 命令，安装支持项目自动打包的工具

修改 package.json -> scripts 中的 dev 命令如下：

"scripts": { "dev": "webpack-dev-server", },

1
2
3

  "scripts": {
    "dev": "webpack-dev-server",
  },

将 src -> index.html 中，script 脚本的引用路径，修改为"/bundle.js" // 该文件，实际是存在内存中

运行 npm run dev 命令，重新进行打包

在浏览器中访问 http://localhost:8080，查看自动打包后的页面效果

[3] 配置 html-webpack-plugin（插件 plugins ）生成预览页面

原理是：把 src -> index.html 移动到项目存储目录下，就可以直接访问了。

通过html-webpack-plugin 插件实现，操作如下：

运行 npm install html-webpack-plugin --save-dev 命令，安装生成预览页面的插件

修改 webpack.config.js 文件头部区域，添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数 const HtmlWebpackPlugin = require('html-webpack-plugin'); const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象 template:'./src/index.html', // 指定要复制的模板文件 filename:'index.html' // 指定生成的文件的名称，该文件存在与内存中，在目录中不显示 })

1
2
3
4
5
6

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({  // 创建插件的实例对象
template:'./src/index.html',    // 指定要复制的模板文件
filename:'index.html'  // 指定生成的文件的名称，该文件存在与内存中，在目录中不显示
})

// （略，此处为vue cli3 中的形式）上述操作效果等同于如下操作： Content not from webpack is served from '/Users/webpiece/Desktop/demo/public' directory // 因此，应当将 index.html 文件，移到项目存储目录下的 public 文件夹中（没有就新建一个）

1
2
3
4

// （略，此处为vue cli3 中的形式）上述操作效果等同于如下操作：

Content not from webpack is served from '/Users/webpiece/Desktop/demo/public' directory
// 因此，应当将 index.html 文件，移到项目存储目录下的 public 文件夹中（没有就新建一个）

修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = { plugins:[htmlPlugin] // plugins 数组是webpack打包期间会用到的一些插件列表 }

1
2
3

module.exports = {
plugins:[htmlPlugin]  // plugins 数组是webpack打包期间会用到的一些插件列表
}

[4] 配置自动打包相关的参数

package.json 中的配置

--open 打包完成后自动打开浏览器页面

--host 配置 IP 地址

--port 配置端口号

"scripts": { "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8088" }

1
2
3

  "scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1  --port 8088"
  }

webpack 中的加载器

[1] 通过 loader 打包非 js 模块