1、node_modules依赖包
①我们通过项目终端输入npm i，就会生成该依赖包，依赖包会自动根据package.json文件中所有需要的东西进行封装下载，例如：jquery，vue2等等
②该依赖包因为承载项目的所有内容，在项目大的时候其所占内存也会很大。
③在项目传发时，依赖包是可以删除的，他人只需要输入npm i，即可下载回来
2、webpack安装
①npm install webpack@4 --save--dev：-save局部安装webpack
②npm install webpack -g：-g全局安装webpack
3、本篇项目例子是继续前篇文章的项目例子
Vue2之webpack篇（二）Loader_申小兮IU的博客-CSDN博客
loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参
一、Plugin
1、简介
（1）Plugin相当于一个插件
（2）功能
①可用于添加版权
②打包html到dist文件夹
拓展：项目完成后，项目部署到服务器上的就只有dist文件夹，但是前面文章所学内容并未将html打包到dist文件夹
③压缩js
拓展
生产环境：所有代码挤在一块，不留空隙，为了减少空间
开发环境：间隔回车错落有致，可读性强
（3）loader与plugin的区别
①loader主要用于转换某些类型的模块，是一个转换器
②plugin是插件，是对webpack本身的扩展，是一个扩展器
2、添加版权的plugin
webpack内置就有plugin，因此只需要在webpack.config.js中的plugins中配置插件
const webpack = require('webpack')
plugins:[
new webpack.BannerPlugin('最终版权归')
]配置
dist打包的bundle.js文件
3、打包html的plugin
（1）安装html-webpack-plugi
npm i html-webpack-plugi（2）在webpack.config.js的plugins中配置htmlWebpackPlugin
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new webpack.BannerPlugin('最终版权归申小兮所属'),
new htmlWebpackPlugin()
]（3）webpack打包完，在dist文件夹中我们会看到多生成了一个html文件
（4）但是打开index.html查看，发现图片无法显示，是因为我们原先通过配置css-loader时，指定了html中引用图片的相对路径
（5）现在dist中已经有html文件了，就不需要设置图片的相对html文件路径，将publicPath: "./dist/"注释
// 处理css中图片的使用
{
test: /\.(png|jpg|git)$/,
/* 数组对象形式 */
use: [
{
// 使用file loader，解析文件路径
loader: "file-loader",
// 配置
options: {
// 指定html中引用图片的相对html文件的路径
// publicPath: "./dist/",
// 指定文件名，一般会放在一个img相关的文件夹中
name: "imgs/[contenthash].[ext]",
},
},
],
},现在dist已经有html文件了，但是却找不到#app的template
①需要在配置htmlWebpackPlugin中添加指定html文件
plugins: [
new webpack.BannerPlugin("最终版权归申小兮所属"),
new htmlWebpackPlugin({
template:'./class.html'
}),
],注意：class.html是项目中的html文件，不是dist文件夹中生成的html文件
②class.html文件也不需要再引入js，将引入语句注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="./dist/bundle.js"></script> -->
</body>
</html>③webpack打包，运行dist文件夹下的index.html文件
