一，什么是webpack?
WebPack可以看做是模块打包机：它做的事情是，用来处理前端错综复杂的依赖关系（A里面需要B插件，B里面需要有C插件，而C插件里面又需要有D插件）分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
webpack的理念就是一切皆模块化，把一堆的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个js文件，公共代码抽离成一个js文件、某些自己指定的js单独打包，模块可以是css/js/imsge/font等等。
二，webpack可以处理哪些工作？
- webpack可以根据模板生成HTML，并自动处理上面的css/js引用路径
- webpack可以自动处理里面的图片路径，css里面背景图的路径，字体引
- webpack可以开启本地服务器，一边改写代码，一边自动更新页面内容
三，安装
- 首先来到我们的项目目录下，进行项目初始化
npm init -y //项目初始化
- 在我们的项目中首先需要安装一个webpack打包工具，执行如下命令
npm i webpack webpack-cli -D //开发环境下
- 安装好打包工具后，别忘了安装我们的依赖
npm i //安装node_moudles
4.来到我们的项目目录下，此时只有一个node_modules，此时需要建立三个文件夹，dist–打包好的目录，public–公用模板，src–源文件目录，（不一定非要叫这三个名字，只是习惯）
四，配置webpack
在我们的src文件夹下，新建一个文件webpack.config.js，这个文件为webpack的配置文件，webpack在构建打包之前会先读取这个配置文件，基于你设定好的配置进行打包
（1）核心概念
- entry入口：它指定了webpack应该从哪里开始进行打包，进入入口起点后webpack会找出哪些模块和库是入口起点的依赖，这里默认入口文件是src下面的index.js文件
但是你也可以在webpack configuration中配置entry属性，来指定一个或者多个不同的入口起点。例如：
- webpack.config.js
- output出口
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程： - webpack.config.js
module.exports = {
entry:'./src/index.js', //入口
output:{
//出口
filename:"main.js",//文件名
path:__dirname+'/dist' //文件夹 __dirname 当前目录
},
mode:"production",//模式：开发模式 production产品模式
plugins:[
// 实例化插件，指定template模板的位置
new HtmlWebpackPlugin({
template:'./public/index.html'
})
],
}
模式mode
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
mode 节点的可选值有两个，分别是：
development:
- 开发环境、
- 不会对打包生成的文件进行代码压缩和性能优化、打包速度快，
- 适合在开发阶段使用
production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
1.在webpack.config.js文件中配置
2.在pack.json文件中的scripts节点下，新增服务器
3.在终端运行npm run serve命令，启动webpack进行项目的打包构建
（3）loader
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
- loader加载器作用：协助 webpack 打包处理特定的文件模块。
3.1 css处理器
css-loader 分析css关系-合并一个css（import）
作用：css-loader处理 .css 文件 style-loader把css加载 到style 标签内
- 安装
运行如下的命令，即可在项目中安装此插件
npm i css-loader strle-loader -D
- 配置
在webpack.config.js写以下代码：
module:{
rules:[
// 当文件名test通过，使用如下插件
{
test:/\.css$/,use:["style-loader","css-loader"]},
{
test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use:[{
loader:"url-loader",
options:{
limit:5000,name:'images/[hash].[ext]'}
}],
}
]
},
3.1 图片与文件处理
file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件
url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)
image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积
html-loader html 代码里处理 img 标签的 loader。
- 安装：运行如下命令，既可在项目中安装此插件
npm i file-loader url-loader
- 配置
在webpack.config.js写以下代码
module.exports = {
entry:'./src/index.js', //入口
output:{
//出口
filename:"main.js",//文件名
path:__dirname+'/dist' //文件夹 __dirname 当前目录
},
mode:"production",//模式：开发模式 production产品模式
plugins:[
// 实例化插件，指定template模板的位置
new HtmlWebpackPlugin({
template:'./public/index.html'
})
],
module:{
rules:[
// 当文件名test通过，使用如下插件
{
test:/\.css$/,use:["style-loader","css-loader"]},
{
test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use:[{
loader:"url-loader",
options:{
limit:5000,name:'images/[hash].[ext]'}
}],
}
]
},
// 需要提前安装 npm i webpack-dev-server -D
devServer:{
port:8080,
hot:true, //更新
host:"localhost",//域名
open:true,//默认自动打开浏览器
proxy:{
} //vue.config.js 代理一致
}
}
案例
- 图片处理
在index.js文件中
- 然后我们运行项目npm run build
注意：不需要再次配置 - 导入css
六，webpack-dev-server
webpack-dev-server可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
- 安装
运行如下命令，即可在项目中安装此插件
npm i webpack -dev-server -D
- 配置webpack.config.js
在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：
module.exports={
devServer:{
port:8080,
hot:true, //更新
host:"localhost",//域名
open:true,//默认自动打开浏览器
proxy:{
} //vue.config.js 代理一致
}
- 修改package.json
修改 package.json -> scripts 中的 serve 命令如下：
运行 npm run build 命令，重新进行项目的打包然后就可以npm run serve 运行项目，会自动跳转到浏览器，查看自动打包效果