webpack

一、环境准备

        1、初始化包环境

yarn init

        2、安装依赖包

yarn add webpack webpack-cli -D

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

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

二、webpack如何使用

        1、默认src/index.js —— 打包入口文件

        2、需要引入到入口文件才会参与打包

        3、执行package.json里的build命令，执行webpack打包命令

        4、默认输出dist/main.js的打包结果

注：重新打包

确认引入到入口文件中后，重新执行yarn build 打包命令

三、修改默认入口和出口

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

        1、新建webpack.config.js(webpack默认配置文件名)

        2、通过entry设置入口文件路径

        3、通过output对象设置出口路径和文件名

const path = require('path');

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

四、yarn build 执行流程图

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

五、webpack插件——自动生成html文件

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

        1、下载插件

yarn add html-webpack-plugin -D

        2、webpack.config.js添加配置

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

module.exports = {
    plugins:[
        new HtmlWebpackPlugin({ // plugins插件配置
            template:'./public/index.html' // html文件模版
        })
    ]
}

六、webpack打包css文件

直接引入到入口文件打包会报错，因为webpack默认只能处理js文件

因此，需要下载加载器 css-loader 、style-loader

css-loader 让webpack能处理css类型文件

css代码被打包进js文件中

style-loader 把css插入到DOM中(style标签)

webpack使用加载器：

1、下载加载器

yarn add css-loader style-loader -D

2、在webpack.config.js中配置

module.exports = {
    module:{ // 加载器
        rules:[ // 规则
            ...
            { // 一个具体的规则对象
                test:/\.css$/I, // 匹配 .css结尾的文件
                // 从右到左，顺序不能颠倒
                use:["style-loader","css-loader"]
            }
        ]
    }
}

七、webpack处理less文件

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

less-loader作用：识别less文件

less 作用：将less编译尾css

        1、将less文件引入到入口文件

        2、下载加载器处理less文件

yarn add less less-loader -D

        3、在webpack.config.js中针对less配置

module:{
    rules:[
        ...
        {
            test:/\.less$/,
            use:["style-loader","css-loader","less-loader"]
        }
    ]
}

八、webpack处理图片文件

webpack5，使用asset module技术实现字体文件和图片文件处理，无需配置额外loader

文档：https://webpack.docschina.org/guides/asset-modules/

以前用url-loader 和 file-loader 来处理

现在在webpack.config.js中针对图片文件设置type:"assets"

module:{
    rules:[
        ...
        { // 图片文件的配置(仅适用于webpack5版本)
         test:/\.(png|jpg|gif|jpeg)$/I,
         type:'asset' // 匹配上面的文件后，webpack会把他们当作静态资源处理打包
         // 如果设置的是asset模式
         // 以8KB大小区分图片
         // 小于8KB的，把图片文件转base64，打包进js中
         // 大于8KB的，直接把图片文件输出到dist下
        }
    ]
}

webpack加载文件优缺点：

        图片被翻译成base64，放到了js文件中

        好处：浏览器不用发送请求了，直接可以读取，速度快

        坏处：图片太大，再转`base64`就会让图片的体积增大30%左右，得不偿失

九、webpack处理字体图标

在webpack.config.js的rules里添加针对字体图标的加载器规则，使用asset/resource(直接输出文件并配置路径)

module:{
    rules:[
        ...
        {
            test:/\.(eot|svg|ttf|woff|woff2)$/,
            type:'asset/resource', // 所有的字体图标文件，都输出到dist下
            generator:{ // 生成文件名字-定义规则
                filename:'fonts/[name].[hash:6][ext]' // [ext]会替换成 .eot/.woff
            }
        }
    ]
}

十、webpack对js语法降级

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

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

babel：一个javascript编辑器，把高版本js语法降级处理输出兼容的低版本语法

babel-loader：可以让webpack转译打包的js代码

        1、下载加载器

yarn add babel-loader @babel/core @babel/preset-env -D

        2、在webpack.config.js的rules里添加加载器规则

module:{
    rules:[
        ...
        {
            test:/\.m?js$/,
            exclude:/(node_modules|bower_components)/, // 不匹配这些文件夹下的文件
            use:{
                loader:'babel-loader', // 使用这个loader处理js文件
                options:{ // 加载器选项
                    presets:['@babel/preset-env'] // 预设：@babel/preset-env 降级规则
                }
            }
        }
    ]
}

附：webpack开发服务器(webpack-dev-server)

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

        可以将代码运行在服务器内存中，自动更新，实时返回给浏览器显示

        1、下载模块包

yarn add webpack-dev-server -D

        2、在package.json中自定义webpack开发服务器启动命令

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

        3、启动当前项目里的webpack开发服务器

yarn serve

         4、在webpack.config.js中更改端口号

module.exports = {
    deserver: {
        port:3000 // 端口号
    }
}