学习目标：
1.能够说出webpack的作用
2. 能够掌握webpack基本配置
3. 能够知道webpack开发服务器运作过程
4. 能够熟练webpack中文文档

---

一、webpack基本概念

webpack本质是, 一个第三方模块包, 用于分析, 并打包代码的一个工具

• 支持所有类型文件的打包
• 支持less/sass => css
• 支持ES6/7/8 => ES5
• 压缩代码, 提高加载速度
  

二、webpack使用步骤

1、环境准备

① 初始化包环境（得到package.json文件）

npm init -y

② 安装依赖包

npm install webpack webpack-cli -D

③ 配置scripts (自定义命令)

"script":{
	"build":"webpack"
},

三、webpack的配置

1、webpack入口和出口

const path = require("path");
module.exports = {
    // entry代表入口文件
    entry: "./src/main.js",
    // output代表输入到哪里
    output: {
        // path代表输出到那个文件夹中
        path: path.resolve(__dirname, "dist"),
        // filename代表输出到文件夹下的哪个文件中
        filename: "bundle.js",
    }
}

2、html-webpack-plugin插件

npm install html-webpack-plugin -D

webpack.config.js添加配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
        new HtmlWebpackPlugin({
            // template代表使用哪个html文件，作为模板
            template: "./public/index.html",
        }),
    ],

3、webpack-使用加载器

css-loader 让webpack能处理css类型文件
style-loader 把css插入到DOM

npm install css-loader style-loader -D

webpack.config.js添加配置

module.exports = {
     module: {
            // 规则对象，表示什么加载器处理什么文件
            rules: [
            {
             test: /\.css$/i,
             use: [
                 "style-loader",
                 "css-loader",
             ]
      		}
      	]
  	}
}

4、webpack处理less文件

less-loader作用: 识别less文件
less 作用: 将less编译为css

npm  install less less-loader -D

webpack.config.js添加配置

module.exports = {
     module: {
            // 规则对象，表示什么加载器处理什么文件
            rules: [
             {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            }
      	]
  	}
}

5、webpack处理图片文件

加载文件优缺点：
好处: 浏览器不用发请求了，直接可以读取, 速度快
坏处: 图片太大，再转base64就会让图片的体积增大 30% 左右, 得不偿失

module:{
rules:[{
	{
        test: /\.(png|jpg|gif|jpeg)$/,
        // type表示使用何种资源模块类型
        type: "asset",
    },
}]
}

6、webpack处理图片文件

webpack.config.js添加配置

module:{
	rules:{
		{
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                // type表示使用何种资源模块类型
                type: "asset/resource",
                // 自定义输出文件的名字
                generator: {			
                    filename: "font/[name].[hash:6][ext]",
                }
          }
	}
}

7、webpack对JS语法降级

babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法 babel-loader: 可以让webpack转译打包的js代码

npm i babel-loader @babel/core @babel/preset-env -D

在src/main.js – 定义箭头函数, 并打印箭头 函数变量 (千万不能调用, 为了让webpack打包 函数, 看降级效果)
webpack.config.js添加配置

module:{
	rules:{
		// webpack对JS语法降级
            {
                test: /\.js$/,
                // exclude表示排除，不要打包这些文件夹中的代码
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    }
                }
            }
      ]
}

四、webpack开发服务器

npm install webpack-dev-server -D

自定义webpack开发服务器启动命令serve – 在package.json里

"scripts": {
        "build": "webpack",
        "serve": "webpack serve"
    },

启动当前工程里的webpack开发服务器

npm run serve

在webpack.config.js中添加如下配置端口

module.exports = {
	devServer: {
       	port: 9000,
        open: true
    }
}