webpack| 青训营笔记这是我参与「第四届青训营」笔记创作活动的第11天 webpack 是代码编译工具，有入口、

这是我参与「第四届青训营」笔记创作活动的第11天

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

一、什么是Webpack？

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

文件结构

.
|——src
|   ﹂index.js
|——webpack.config.js

1.安装依赖

npm i -D webpack webpack-cli

2.编辑配置文件

module.exports={
    //声明入口：要打包的文件
    entry:'index.js',
    //声明产物出口
    output:{
        filename:"[name].js",
        //项目打包后的存放位置
        path:path.join(__diename,"./dist"),
    },
    module:{
        rules:[{
            test:/.less$/i,
            use:['style-loader','css-loader','less-loader']
        }]
    }
}

3.执行编译命令