Webpack进阶之路

前言

谨此一文记录webpack5学习之路

Webpack基础篇

1、什么是webpack

本质上讲:webpack是一个现代JavaScript应用程序的静态打包工具，当webpack处理应用程序的时候，它会递归的形成一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或者多个bundle。

简单来说： webpack就是一个静态资源打包工具，负责将项目中依赖的各个模块，打包成一个或多个bundle

2、webpack的优点

拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置
webpack扩展性强，插件机制完善，开发者可自定义插件（plugin）、loader
webpack社区庞大，更新速度快，轮子丰富

3、基础应用

3.1、entry（入口文件）

入口是依赖关系图的开始，从入口开始寻找依赖，打包构建，webpack允许一个或者多个入口配置：

单入口配置

module.exports = {
    entry:"indexjs"
}
复制代码

多入口配置

module.exports = {
    entry :{
        index: path.join(srcPath,"index.js"),
        other:path.join(scrPath,"other.js")
    }
}
复制代码

entry更多配置详情参考webpack文档

3.2、output（出口文件）

输出用于配置webpack构建打包的出口，如打包的位置，打包的文件名：

单个入口起点

对于单入口起点，filename回事一个静态的名称

module.exports = {
    output:{
        path: path.resolve(__dirname,"dist"),
        filename:"bundle.js",
    }
}
复制代码

多个入口起点

对于多个入口起点，代码拆分(code splitting)、或各种插件(plugin) 创建多个bundle，应该使用一下替换方式，来赋予每个bundle一个唯一的名称

使用入口名称

module.exports = {
    output:{
        filename:"[name].bundle.js"
    }
}
复制代码

使用内部chunk id

module.exports = {
     output:{
         filename:"[hash].bundle.js"
     }
}
复制代码

使用chunkhash

module.exports = {
    output:{
        filename:"[name].[chunkhash].bundle.js"
    }
}
复制代码

使用contenthash

module.exports = {
    output：{
        filename："[name].[contenthash:8],bundle.js"
    }
}
复制代码

TODO webpack三种hash的区别，webpack缓存相关
output更多配置详情参考webpack文档

3.3、loader（编译转换）

webpack自带JavaScript和JSON文件的打包构建能力，无需格外配置，对于其他类型的文件如CSS文件等，则需要安装loader处理；
loader让webpack能够去处理其他类型的文件，并将他们转换为有效模块，以供应用程序使用，以及被添加到依赖图中

module.exports = {
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
             }
         ]
       }
 }
复制代码

常用的loader

style-loader
css-loader
less-loader、sass-loader
thread-loader

module更多配置详情参考webpack文档

具体loader配置看loader文档

3.4、plugin（插件）

插件则是用于扩展webpack的能力

module.exports = {
    plugin:[new HtmlWebpackPlugin({
        template:'./src/index.html'
    })]
}
复制代码

具体plugin配置看具体plugin文档

plugin更多配置详情参考webpack文档

3.5、mode模式

webpack提供了模式选择，包括开发模式、生产模式、空模式，并对不同模式做出了对应的内置优化。可以通过配置模式让项目更优。
配置如下：

module.exprots = {
    mode:'development'
}
复制代码

3.6、resolve（解析）

resolve用于配置模块如何解析，常用配置如下：

alias：配置别名，简化模块引入
extensions:在引入模块时可不带后缀
symlinks:用于配置 npm link 是否生效，禁用可提升编译速度

module.exports = {
    resolve:{
        extensions:['.js','.jsx','.ts','.json','.d.ts'],
        alias:{
            '@':"./src"
         },
         symlinks:false
    }
}    
复制代码

resolve更多配置详情参考webpack文档

3.7、optimization（优化）

optimization用于自定义webpack的内置优化配置，一般用于生产模式（mode：production） 提升性能，常配置项如下：

minimize：是否压缩budle
minimizer：是否配置压缩工具，如TerserPlugin、OptimizeCssAssetsPlugin
splitChunk：拆分bundle
runtimeChunk：是否需要将所有生成chunk之间共享运的运行时文件拆分出来

module.exports = {
    optimization:{
        minimizer:[
            new CssMinimizerPlugin()
         ],
         splitChunks:{
             chunks:'all',
             //重复打包问题
             cacheGroup：{ 
                 vendors：{//node_modules里面的代码
                     test:/[\\/]node_modules[\\/]/,
                     chunks:"all",
                     name:"vendors",//chunks name
                     priority:10, //优先级
                     enforce:true
                 }
            }
         }
     }
 }
复制代码