首先 · 小小的说一下。
之前，用commonJS，ES6在做模块化等。用起来略繁琐。下载各类插件，手动对各类代码分类，不断编译。
呐，现在就使用webpack打包一下，现在流行的有webpack，gulp，主要学习webpack。
webpack：打包工具，又成构建工具。
作用：对JS、css、html、less、img等等各种各样的文件，进行合并压缩，最后，自动构建成上线项目。在webpack中，会默认将我们的前端资源文件，都当做模块处理，生成一个对应的静态资源。webpack自身只支持JS模块，但是，通过插件，我们可以加载任何类型的文件。
开始学习吧！
一、创建项目，下载webpack
项目{src，webpack.config.js}
src{js，css，less，img}
默认入口文件为：项目文件夹下面的：./src/index.js
默认输出目录为：项目文件夹项目的：./dist/build.js（打包后自动生成）
- 初始化
npm init
- 全局安装webpack、webpack-cli
npm install webpack -g
npm install webpack-cli -g
- 本地安装webpack、webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
安装说明：
1. 在webpack 4 以前，不用安装webpack-cli即可使用。在webpack4版本以后，它将webpack和webpack-cli分开处理了，需要安装一个webpack-cli。
2. cli，命令行工具。任何一个软件，想在命令行（CMD）里面去使用，必须有cli工具。
3. 实际开发中，不会传输node_modules文件夹，那么会缺少文件，无法运行。此时，--save发挥作用：将下载的模块、插件，添加进正在开发的项目的依赖中，即当前下载的插件，添加进：package.json的devDependencies中。再拿到文件时，在package.json所在文件夹，执行npm install命令，自动下载package.json里面的所有依赖。
二、运行webpack
webpack4以前的版本，打包命令为： webpack src/entry.js dist/build.js。
webpack4版本以后，则将命令精简了，直接输入：webpack 即可。
默认情况下， webpack会识别当前目录下的src下面的index.js文件。
默认可以打包ES6，但是不会转换ES6，打包完还是ES6语法，想变成，需要插件。
三、改变默认设置
创建：webpack.config.js
①：内置模块设置路径。
②：暴露一波
const path = require("path");
/* 暴露一波 */
module.exports = {
/* 修改webpack的默认设置 */
/* 设置入口文件 */
entry:"./src/js/index.js",
/* 设置输出文件夹，和输出js文件 */
output:{
filename:"build.js",
path:path.resolve(__dirname,"dist"),
// publicPath:"./dist/" 这是图片加载改变路径
}
四，两种打包模式
①：webpack --mode development 开发模式，不压缩
②： webpack --mode production 生产模式，压缩代码
代码有点长，丢到package.json里运行。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"pro": "webpack --mode production",
"ser": "webpack-dev-server --open"
},
现在，命令行输入：npm run dev 即可。
npm run dev
五，识别css、less、img、html
1.下载插件
css-loader,style-loader 负责处理层叠样式表
url-loader,file-loader 负责处理图片
2.配置webpack.config.js
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:"url-loader",
options:{
limit:8192
}
}
]
},
{
test:/\.less$/,
use:[
{
loader:"style-loader"
},
{
loader:"css-loader"
},
{
loader:"less-loader"
}
]
}
]
}
}
3.图片问题说明
当图片大于8kb的时候，无法通过二进制数据去读取,会将图片复制一份丢到输出目录。需要将我们的资源获取目录，跳转到输出目录，并配置 输出publicPath
publicPath:"./dist/" // 这是图片加载改变路径
还可以，直接把html丢进输出目录，更加推荐这个方法。
为什么把html丢进dist目录，而不是去配置publicPath，因为热加载。publicPath的作用，就是让整个webpack去这个目录下寻找资源，而热加载，本身是不会去任何目录下面寻找资源，webpack的热加载机制，是在内存空间中，创建一个虚拟内存，然后，动态的识别所有源码， 如果说配置了publicPath，webpack就会放弃从虚拟内存中寻找资源，而是会去dist目录下面寻找资源，必须打包一次，dist目录才会改变，所以，导致热加载失效。
六、热加载
1.下载webpack-dev-server
npm install webpack-dev-server --save-dev
2.运行webpack-dev-server
webpack-dev-server ---open
热加载调试用的，要上线，还是得编译打包一次。
