这是我参与[第四届青训营]笔记创作活动的第十天，今天我学习并总结了一些关于Webpack方面的知识点。

1.什么是Webpack?

本质上是一种前端资源编译、打包工具。

多份资源文件打包成一个Bundle
支持Babel、Eslint、 TS、 CoffeScript、 Less、Sass
支持模块化处理CSS、图片等资源文件
支持HMR+开发服务器
支持持续监听、持续构建
支持代码分离
支持Tree shaking
支持Sourcemap

2.Webpack应用

1.安装

npm i -D webpack webpack-cli

2.配置编译文件

const{resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(_dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //打包其他资源(除了html/css/js以外的资源)
            {
                //排除css/js/html资源
                exclide:/\.(css|js|html)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

3.执行编译命令

npx webpack

3.Webpack核心流程

1.入口处理

从'entry' 文件开始，启动编译流程

2.依赖解析

从entry 文件开始，根据'require' or 'import' 等语句找到依赖资源

3.资源解析

根据'module' 配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

4.资源合并打包

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

模块化+一致性

多个文件资源合并成一个，减少http请求数
支持模块化开发
支持高级JS特性
支持Typescript、 CoffeeScript 方言
统一图片、CSS、字体等其它资源的处理模型

4.Webpack代码使用方法

webpack的入口起点，是通过entry来配置的，比如entry:'./src/index.js',就是将入口起点放在了src文件夹下的index.js。

webpack的输出，是通过output输出的，使用大致如下，其中filename是输出的文件名，path代表着输出路径，也就是打包后的文件在哪。__dirname 是一个变量，代表着当前文件的绝对路径。

    output:{
        filename:'built.js',
        path: resolve(__dirname ,'build' )
    },

webpack的loader配置，放置在moudle中的rules里面，使用方法大致如下。不同的文件必须配置不同的loader。在下面案例中，test后的正则作用是匹配css文件，use里存放loader。use数组中的loader执行顺序为从右到左，从下到上,依次执行。下方案例中，我就是先写了style-loader,再写了css-loader。目的是先创建style标签，将js中的样式资源插入进行，添加到head中生效，再将css文件变成commonjs模块加载js中,里面内容是样式字符串。

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

如果想要解析less文件，rules里需要这样写

{
    test:/\.less$/,
    use:[
        'style-loader',
        'css-loader',
        //将less文件编译成css文件
        //需要下载less-loader和less
        'less-loader'
    ]
}

如果想打包图片

{
    test:/\.(jpg|png|gif)$/,
    //使用一个loader
    //下载url-loader file-loader
    loader:'url-loader',
    options:{
        //图片大小小于8kb,就会被base64处理
        //优点：减少请求数量（减轻服务器压力）
        //缺点：图片体积会更大（文件请求速度更慢一点）
        limit: 8*1024,
        // 问题:因为url-loader默认使用es6模块化解析，而html- loader引入图片是commonjs
        // 解析时会出问题: [object Module]
        //解决:关闭url-loader的es6模块化， 使用commonjs解析
        esModule:false,
        //给图片进行重命名
        // [hash:10]取图片的hash的前10位
        // [ext]取文件原来扩展名
        name : '[hash:10].[ext]'

    }
},
{
    test:/\.html$/,
    //处理HTML文件的img图片（负责引入img）
    loader:'html-loader'
}

关于plugins的配置存放在plugins中。使用方式大致如下。html-webpack-plugin默认会创建一个空的html文件，引入打包输出的所有资源（js/css）。当需要有结构的html文件，就可以像下面那样写，作用是复制 './src/index.html'文件，并自动打包输出所有资源（js/css）。

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]

mode指的是模式。有development和production两种。分别对应着开发模式和生产模式。

Webpack基础知识点总结 | 青训营笔记

1.什么是Webpack?

2.Webpack应用

3.Webpack核心流程

4.Webpack代码使用方法