持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情
作者平台：
| CSDN：blog.csdn.net/qq_41153943…
| 知乎：www.zhihu.com/people/1024…
| GitHub：github.com/JiangXia-10…
| 微信公众号：1024笔记
本文一共1434字，预计阅读7分钟
前言
都说不会前端的后端不是一个好的开发。之前因为公司前端不是很多，所以为了项目的需要”被迫“学习了一点前端的知识。今天突然想到了Webpack就想分享一下。
什么是webpack
其实英语如果稍微好些的看这个单词的就应该能够大致明白它的意思和作用：web打包工具。webpack其实就是个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 下图源自网络，侵删!
webpack的使用
使用webpack首先需要安装它。全局安装webpack只需要在命令行执行下述命令：
npm install -g webpack webpack-cli
安装完成之后，执行下述命令查看版本号，如果出现版本号信息则表示安装成功了，和安装java、python、node.js等等这些工具差不多，基本判断是否安装成功的依据就是查看版本号信息：
安装完成webpack之后需要在项目中使用，所以接下来初始化一个基本的前端项目。找一个盘然后创建一个webpack文件夹，进入webpack目录，执行下面的命令：
npm init -y
然后在webpack目录下创建一个src资源文件夹，并且创建三个js文件，如下图：
三个js文件的内容分别如下：
main.js：
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));
utils.js：
exports.add = function (a, b) {
return a + b;
}
common.js:
exports.info = function (str) {
document.write(str);
}
接下来就可以进行js打包了，需要在webpack目录下创建配置文件webpack.config.js，并输入下述内容：
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
该配置文件是为了读取当前项目下src文件夹中的main.js（即入口文件）的内容，并且分析资源依赖，将相关的js文件进行打包，打包后的文件放入当前目录的dist文件夹下，并且将打包后的js文件名为bundle.js。
然后执行下述的编译命令：
webpack --mode=development
webpack文件夹下生成了dist文件夹并且生成了bundle.js文件
bundle.js文件的部分内容如下:
然后只需要在webpack项目文件夹下创建一个index.html文件，然后输入下述代码：
<body>
<script src="dist/bundle.js"></script>
</body>
即在这个html页面文件中引入bundle.js文件即可，然后浏览器预览这个index.html文件：
Webpack本身是只能处理 JavaScript 模块，所以如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器。执行下述命令安装loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader
为了测试下对于css文件处理的效果，需要修改下webpack.config.js文件：
const path = require("path"); //Node.js内置模块
module.exports = {
output:{},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
并且在src文件夹下创建一个css文件：
body{
background:red;
}
然后修改main.js文件，引入上面的css文件：
浏览器中重新打开index.html文件，则页面背景已经变成了红色。
总结
以上就是关于webpack前端资源加载/打包工具的简单介绍和使用。
