一、关于模块化
在学webpack之前，我们需要先谈一谈模块化。前端的工程化少不了的一个部分就是模块化。在ES6之前，我们想要进行门模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。比如CommonJS,CMD,AMD。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
而webpack其中一个核心就是然我们可能进行模块化开发，并且会帮助我们 处理模块间的依赖关系。当然在webpack打包的过程中还有一些附带的功能，比如代码的压缩和图片的压缩，编译等。
如何理解打包呢？
打包就是将webpack中的个各种资源模块进行打包合并成一个或多个包。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将sass转成css，将ES6语法转成ES5语法，将TypeScript转成javaScript等等操作。
二、webpack
1.安装webpack
- 在安装webpack之前我们必须先安装node环境，然后通过使用node的包管理工具npm来安装一些需要使用的包。
- 全局安装webpack一阶脚手架webpack-cli
npm install webpack webpack-cli -g
- 在目录下生成src目录，拥有一个main.js文件，以及html,css,js文件的目录
2.终端命令打包
表示使用webpack将打包后的文件放在dist目录下,文件名是built.js
webpack ./src/main.js -o dist/built.js --mode=development
2.1引入打包文件
在创建好的html中引入打包好的js文件
<script src="/dist/bulit.js"></script>
3.配置文件打包
webpack.config.js 是webpack的配置文件，它的作用就是指定webpack打包时的入口文件，出口文件，打包方式等等一些问题。
配置文件中的所有构建工具都是采用common.js模块的。
3.1初始化包配置文件
当我们要使用node中的包之前，最好是先初始化一个关于包的配置文件，记录包的信息，方便之后的管理和查找。
npm init -y
3.2配置文件中的内容
关于里面的内容我会在后面的文章中介绍：
//引入模块
const{
resolve }=require('path');
module.exports={
//入口文件
entry:'./src/index.js',
//输出
output:{
//输出文件名
filename:'built.js',
//输出路径
//_dirname nodejs的变量，代表当前文件
path: resolve(__dirname,'build')
},
//loader的配置
module:{
rules:[
//详细的loader配置
{
//表示.css结尾的文件
test:/\.css$/,
//使用那些loader进行处理
use:[
//user中的loader执行顺序，从右到左
//创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader',
]
},
{
test:/\.less$/,
user:[
'style-loader',
'css-loader',
//将less文件编译成css文件
'less-loader'
]
}
]
},
//plugin的配置
//详细的plugins的配置
plugins:[
],
//模式
mode:'development',
}
4.webpack打包命令
在之前我们启动的项目的时候会使用例如：npm run srever 或者是 npm run build的方式来运行项目，那么这些是什么呢？
打开我们上面创建好的package.json文件，你会发现有个scripts脚本对象，里面包含的就是项目运行所需要的指令。这样我们就不必写规定的命令来运行一个指令。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
上面我们只需要使用 输入npm run bulid就可以进行打包 。
当然使用这样的方法比直接使用webapck命令打包会更好，因为使用npm run build命令时，会优先去本地查找webpack，而直接使用webapck使用的是全局安装的webpack。
而我们在开发的时候最好是使用本地webpack,这时候我们就需要安装一个本地的webpack。
npm install webpack -D
因为webpack只在开发时有用，所以这里的-D表示开发依赖。
转载：https://blog.csdn.net/weixin_44374938/article/details/116330817