构建webpack知识体系 | 青训营一、什么是Webpack “本质上，webpack是一个用于现代js应用程序的静

一、什么是Webpack

“本质上，webpack是一个用于现代js应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需的每一个模块组合成一个或者多个bundles。它们均为静态资源，用于展示你的内容。”——webpack官网。

值得我们注意的是，在不使用plugin和loader的情况下，webpack处理的是js中的模块化语法。配合loader和plugin使用才能更好的拓展webpack的功能。

二、使用webpack5

下载并配置
(1). 脚手架： npm install webpack webpack-cli --save-dev
(2). 内置服务器： npm i webpack-dev-server -D
然后在项目的根目录下创建webpack.config.js文件(之后每次运行webpack提供的命令，webpack都会先扫描这个文件)。

   const path = require("path")
   module.exports = {
               ...
       devServer: {
           host: "localhost",
           port: "3000",
           open: true // 自动打开浏览器
      }
 }

配置文件
配置文件就是项目根目录下的webpack.config.js文件，一个配置文件的最基础的五个配置分别是：入口、输出、加载器、插件和开发模式（生产 | 开发）。配置文件的基本设置如下：
```
   const path = require("path")
   module.exports = {
      entry: './src/main.js'
      output: {
        path: path.resolve(__direname, 'dist'),
        filenamne: 'static/js/main.js',
        clean: true  //自动清空输出目录
      },
      module: {  },
      plugin: [ ],
    
      }
      mode: 'production'
```
其中entry代表该项目的入口文件，可以有一个或者多个，output是项目的输出文件，module是项目使用的加载器，plugin是项目使用的插件，mode是项目的模式。特别注意，只有在入口文件中被import了的资源才会被加入到整个打包流中。

loader
以处理css文件的loader为例来感受loader的使用。 (1). 下载： npm install --save-dev style-loader css-loader
(2). 修改配置文件的module
```
module: {
    rule: [
        // 添加配置
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader' ]
        }
    ]
}
```
注意，loader的执行顺序是从后往前的。完成配置后，在依赖此样式的js文件中使用import引入css文件即可。

plugin 以处理eslint的插件为例来感受插件的使用。
(1). 下载：npm i eslint-webpack-plugin eslint --save-dev
注意，在webpack5中处理eslint使用的是plugin，在4中使用的是loader。 (2). 在项目根目录下自行配置.eslintrc.js文件
(3). 修改配置文件的plugin

    plugins: [
        new ESLintPlugin({
            //检测那些文件
            context: path.resolve(__dirname, "src"),
            exclude: "node_modules",
            cache: true,//开启eslint缓存
            cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"),//缓存路径
 }),
  ]

三、总结

Webpack是一个打包模块化Javascript的工具，在Webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件，Webpack专注于构建模块化项目，这样的好处是能清晰的描述各个模块之间的依赖关系，以方便Webpack对模块进行组合和打包，经过Webpack的处理，最终会输出浏览器能使用的静态文件。

构建webpack知识体系 | 青训营

一、 什么是Webpack

二、 使用webpack5

三、总结

一、什么是Webpack

二、使用webpack5