webpack模块打包工具

一、webpack基本概念

1.1 为什么学习webpack

• 1.减少文件数量
• 2.缩减代码体积
• 3.提高浏览器打开的速度

1.2 webpack基本概述

webpack本质是一个第三方模块包,用于分析,并打包代码(识别代码,翻译,压缩,整合打包)

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

二、webpack使用步骤

2.1 安装使用yarn

npm install -g yarn

2.2 环境准备

1.初始化包环境 得到package.json文件

yarn init

2.安装依赖包

yarn add webpack webpack-cli -D

3.配置scripts (自定义命令)package.json中

"scripts":{
	"build":"webpack"
}

2.3 webpack基础使用

• 默认入口:src/index.js
• 默认出口:dist/main.js
• 需要引入到入口的文件才会参与打包
• 执行package.json里build命令, 执行webpack打包命令
  

2.4 webpack再次打包

• 确保在src/index.js引入和使用
• 重新执行yarn build命令
  

三、webpack的配置

3.1 webpack-入口和出口

配置文档 https://webpack.docschina.org/concepts/#entry

• 1.新建webpack.config.js
• 2.填入配置

const path = require('path');
module.exports = {
    entry: './src/main.js',//入口
    output: {
        path: path.resolve(__dirname, 'dist'),//出口路径文件夹名称
        filename: 'bundle.js',//出口文件的名字（代码打包到这里）
    },
};

• 3.修改入口文件名
• 4.执行yarn build命令
  

3.2 yarn build执行流程图

执行webpack命令, 找到配置文件, 入口和依赖关系, 打包代码输出到指定位置

3.3 案例-隔行变色

webpack打包后的js需要重新引入到html中使用

3.4 webpack打包html文件

html-webpack-plugin插件

配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/

• 1.下载插件

yarn add html-webpack-plugin -D

• 2.webpack.config.js添加配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',//入口
    output: {
        path: path.resolve(__dirname, 'dist'),//出口路径文件夹名称
        filename: 'bundle.js',//出口文件的名字（代码打包到这里）
    },
    plugins: [new HtmlWebpackPlugin({  //plugins插件设置
        template: './public/index.html'  //告诉webpack使用插件时,以我们自己的html文件作为模板生成dist/html文件
    })],
};

3.5 webpack打包css文件

webpack默认只能打包js文件

使用加载器

• css-loader 文档: https://webpack.docschina.org/loaders/css-loader/
• style-loader文档: https://webpack.docschina.org/loaders/style-loader/
• 1.下载加载器

yarn add css-loader style-loader -D

• 2.webpack.config.js配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ...其他代码
    module: {//加载器
        rules: [  //规则数组形式
            {  //具体的规则对象
                test: /\.css$/i,  //匹配css结尾的文件 i是忽略大小写
                use: ["style-loader", "css-loader"],//从右到左 不能颠倒顺序
                //css-loader:webpack解析css文件 把css代码一起打包进js中
                //style-loader:把css代码插入到DOM上(style标签)
            },
        ],
    },
};

• 3.执行打包命令
• css代码被打包进js文件中
• style-loader会把css代码插入到head下style标签内

3.6 webpack打包less文件

less-loader文档: https://webpack.docschina.org/loaders/less-loader/

• less-loader作用: 识别less文件
• less 作用: 将less编译为css
• 1.下载加载器

yarn add less less-loader -D

• 2.webpack.config.js配置

const path = require('path');
module.exports = {
    module: {//加载器
        rules: [  //规则数组形式
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },
};

• 3.执行打包命令
  

3.7 webpack处理图片文件

webpack无法自己处理图片文件

webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader
文档: https://webpack.docschina.org/guides/asset-modules/

• webpack.config.js配置

const path = require('path');
module.exports = {
    module: {//加载器
        rules: [  //规则数组形式
            { //图片文件的配置 仅支持webpack5
                test: /\.(gif|png|jpeg)/,
                type: 'asset', //匹配上面的文件后,webpack会把 他们当作静态资源处理打包
                //如果设置asset模式 以8kb大小区分图片文件
                //如果小于8kb的 把图片文件装成base64 打包进js
                //如果大于8kb的 直接把图片文件输出到dist下边
            },
        ],

3.8 webpack加载文件优缺点

• 图片翻译成了base64, 放到了js文件中
  • 好处: 浏览器不用发请求了，直接可以读取, 速度快
  • 坏处: 图片太大，再转base64就会让图片的体积增大 30% 左右, 得不偿失

3.9 webpack处理字体图标

• webpack.config.js配置

const path = require('path');
module.exports = {
    module: {//加载器
        rules: [  //规则数组形式
            //字体文件的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource',//所有的字体图标文件 都输出到dist下
                generator: { //生成文件的名字  -定义规则
                    filename: 'fonts/[name].[hash:6][ext]',//[ext]会替换成.eot 或.woff
                }
            }
        ],
    },
};

3.10 webpack对JS语法降级

babel官网: https://www.babeljs.cn/

babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/

• babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法
• babel-loader: 可以让webpack转译打包的js代码
• 1.在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
• 2.下载加载器

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

• 3.配置到webpack.config.js

const path = require('path');
module.exports = {
    module: {//加载器
        rules: [  //规则数组形式
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,//不去匹配这些文件夹下的文件
                use: {
                    loader: 'babel-loader', //使用这个loader处理js文件
                    options: {  //加载器选项
                        presets: ['@babel/preset-env']  //预设:@babel/preset-env降级规则-按照这里的规则降级js语法
                    }
                }
            }
        ],
    },
};

• 4.执行打包命令

四、webpack开发服务器

4.1 为什么借用webpack开发服务器

每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s)

4.2 webpack-dev-server模块使用

webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/

• 1.下载模块化

yarn add webpack-dev-server

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

"scripts": {
    "build": "webpack",
    "serve": "webpack serve",
    "dev": "webpack --mode development" 
  },

• 3.webpack.config.js中设置mode为development

module.exports = {
    "mode": 'development',
};

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

yarn serve

• 5.重新编写代码, 观察控制台和浏览器是否自动打包和更新
  
  

4.3 webpack-dev-server配置

webpack-dev-server配置文档:https://webpack.docschina.org/configuration/dev-server/

• 在webpack.config.js中添加如下配置即可