今天尝试着写一下webpack，不知道写的时候会不会把自己绕进去。如果有错误的地方还请大家指正。谢谢阅读的朋友。
一、认识webpack
1.1 定义：前端自动化构建工具，基于Node.js开发。
1.2 针对问题：解决引入静态资源的合并、打包、压缩、混淆等问题。
1.3 如果不使用自动化构建工具会有什么问题：
① 网页加载速度慢。
② 要处理很多包与包之间的依赖关系。
二、webpack的安装
2.1 安装方式：
① 全局安装：npm install webpack -g
② 安装到项目依赖中：在项目根目录下运行 npm install webpack --save-dev
注意：webpack4，需要同时安装webpack-cli。
2.2 创建项目目录：node-modules文件夹是安装webpack时生成的，不用手动添加。需手动添加的已经用红色线条标出
安装完成后，使用npx webpack 进行打包。然后会在项目目录dist文件下生成main.js压缩文件。
2.3 代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack学习</title>
<!-- 引入刚才打包生成的main.js文件 -->
<script src="../dist/main.js"></script>
</head>
<body>
</body>
</html>
console.log('这次能行')
打印结果：
三、手动配置webpack
3.1 新建配置文件：/src/webpack.config.js（注意：在这之前请先将刚才手动创建dist文件夹删掉。）
3.2 配置内容：
let path = require('path ')
module.exports = {
mode: 'development', // production or development
entry: './src/index.js', // 入口文件
output: {
filename:'main.js', // 打包之后的文件名称
path: path.join(__dirname, 'dist')
}
}
3.3 目录结构:
3.4 代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack学习</title>
<!-- 引入刚才打包生成的main.js文件 -->
<script src="../dist/main.js"> </script>
</head>
<body>
</body>
</html>
console.log('这次也可以打出来')
3.5 打印结果
4、手动配置webpack内置服务
此时页面启动的时候，还不能通过loaclhost启动。webpack有一个内置的通过express实现的开发服务。我们可以安装它，并且配置相关内容，就可以实现通过localhost来访问页面了。它的好处是，它不会真正的去打包，而是在内存中生成一个打包。
4.1 安装： npm install webpack-dev-server -D (注意：这个大写的D说明是开发时的依赖)
4.2 package.json配置：
4.3 webpack.config.js配置：
运行：npm run dev
5、手动配置html模板：
5.1 安装：npm install html-webpack-plugin -D
5.2 webpack.config.js配置：
6、手动配置css
6.1 安装loader
npm install css-loader style-loader less-loader
6.2 webpack.config.js配置：
module: {
rules: [ // 规则
// loader执行顺序：默认从右向左，从下向上
{
test: /\.less$/,
use:[
{
loader: 'style-loader',
options:{
insertAt: 'bottom'
}
},
'css-loader',
'less-loader'
]},
]
}
新建index.css文件
body {
background-color: pink;
}
index.js引入css
require('./index.css')
6.3 执行npm run dev
写到这，我已经把自己写糊涂了，后面的内容，我自己再屡屡，我不知道大家能不能看的明白。如果有错误的地方，欢迎大家指正，共同进步。
