webpack定义解析部分摘要|青训营

webpack是前端工程化的重要工具，是高阶前端必经之路。

一个前端项目通常是由很多种资源构成的，我们可以手动管理这些资源，但是这存在过程繁琐、需要严格按以来顺序书写等问题,webpack、vite等工具可以解决这些问题。webpack本质是一种前端资源编译、打包工具，可以把多份资源文件打包成一个bundle,支持babel、eslink、模块化处理css等功能。

安装webpack的命令为：

l npm i -D webpack webpack-cli

下面是一个webpack的配置文件：

module.exports={
    entry:'main.js',
    output:{
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
    },
    module:{
        rules:[{
            test:/\.less$/i,
            use:['style-loader','css-loader','less-loader']
        }]
    }
}

执行编译的命令为：

l npx webpack

编译打包之后，多个文件会合并为一个文件，import语句会变成webpack_require语句。

一个团队里总需要有人熟悉webpack，面试也经常会问webpack的原理和优化。