Web 前端之 Webpack 的十分钟简单入坑 Webpack 教程

一、简单介绍

二、基础环境搭建

三、webpack 基础方法打包（webpack --mode=development ./myMain.js）

四、webpack 使用配置文件进行打包（webpack）

五、webpack-dev-server 浏览运行编译的包网页（http://localhost:8080/）

一、简单介绍

Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Web 前端开发中使用 webpack ，测试webpack 打包功能，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

操作环境：

win 10
node 16.14.0 版本
npm 8.3.1 版本
webpack: 5.73.0
webpack-cli: 4.10.0
webpack-dev-server 4.9.3

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

参考文献：Webpack 入门教程 | 菜鸟教程

二、基础环境搭建

具体参见：Web 前端之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程

三、webpack 基础方法打包（webpack --mode=development ./myMain.js）

1、在一个文件夹中，打开控制台，mkdir 创建一个文件夹，并进入文件夹，添加一个脚本，代码如下

alert('我的测试 Webpack 工程')

2、回到控制台，webpack --mode=development ./myMain.js 进行打包

3、添加一个index.html，引进刚才打包生成的文件，代码如下

<html>
<head>
	<meta charset='utf-8'>
</head>
<body>
	<script src='./dist/main.js'></script>
	<div>webpack测试工程</div>
</body>
</html>

4、双击 index.html ，浏览器弹出一个alert

5、模拟添加其他插件，添加一个 plugins 文件夹，myPlugin.js 代码如下

module.exports='我是插件内容'

6、在 myMain.js 中添加代码引入上面的插件，代码如下

alert('我的测试 Webpack 工程')
console.log(require('./plugins/myPlugin.js'))

7、重新webpack --mode=development ./myMain.js 进行打包，双击 index.html ，浏览器弹出一个alert，并且浏览器控制台有打印输出

8、添加 css-loader、style-loader ，使用命令 npm install css-loader style-loader，当前目录生成 node_modules 目录（以及 package.json），它就是 css-loader 和 style-loader 的安装目录，package.json 内容如图

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

9、添加一个style 文件夹，并添加脚本 myStyle.css，代码如下

body{
	background:blue;
}

10、在 myMain.js 中添加代码引入css/style 相关，代码如下

require('!style-loader!css-loader!./styles/myStyle.css')

alert('我的测试 Webpack 工程')
console.log(require('./plugins/myPlugin.js'))

11、重新webpack --mode=development ./myMain.js 进行打包，双击 index.html ，浏览器弹出一个alert，浏览器背景蓝色，并且浏览器控制台有打印输出

四、webpack 使用配置文件进行打包（webpack）

注意：如果配置文件名字不是webpack.config.js，使用 webpack --config 配置文件名称带扩展名，例如 webpack --config webpack.conf.js

1、添加 webpack.config.js 配置文件，内容如下

const path = require('path')

module.exports = {
    // 入口文件
	entry:'./myMain.js',
	output:{
        // 输出到文件夹
		path:path.resolve(__dirname,'public'),
        // 打包的文件名
		filename:'main.js'
	},
    // 模块
	module:{
		rules:[
			{test:/\.css$/, use:'style-loader!css-loader'}
		]
	},
    // 模式
	mode:'development'
	
}

2、在控制台，使用 webpack 直接打包，生成 public 文件夹，和public/main.js

3、把之前的 index.html 引用为public/main.js

4、双击 index.html ，浏览器弹出一个alert，浏览器背景蓝色，并且浏览器控制台有打印输出

5、添加 webpack 插件，npm install webpack --save-dev

插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工作。

webpack 自带一些插件，你可以通过 npm 安装一些插件，比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。

6、在webpack.config.js 中添加 BannerPlugin 插件，在文件头部输出一些注释信息

const path = require('path')
const webpack =require('webpack')
module.exports = {
	entry:'./myMain.js',
	output:{
		path:path.resolve(__dirname,'public'),
		filename:'main.js'
	},
	module:{
		rules:[
			{test:/\.css$/, use:'style-loader!css-loader'}
		]
	},
	mode:'development',
	plugins:[
		new webpack.BannerPlugin('我的 webpack 测试工程呢')
	],

}

7、在控制台，webpack 重新生产 public/main.js，打开 main.js 文件头信息如图

8、当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色，如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

（因为这是个简单的测试工程，效果不是很明显）

webpack --progress --color --watch

五、webpack-dev-server 浏览运行编译的包网页（http://localhost:8080/）

1、安装 webpack-dev-server，控制台命令 npm install webpack-dev-server -g

2、在控制台输入 webpack-dev-server 运行，结果如下

3、在 public 文件夹，添加一个 index.html，引入public/main.js，代码如下

<html>
<head>
	<meta charset='utf-8'>
</head>
<body>
	<script src='./main.js'></script>
	<div>webpack测试工程</div>
</body>
</html>

4、在浏览器中，浏览网址，alert 、浏览器背景蓝色，控制台输出打印日志