webpack学习笔记一

什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。详细使用可参考官方文档。

安装

在官网中给出了两种安装方式：

全局安装

局部安装

因为全局安装webpack时，会将项目中的webpack锁定到指定版本，并且在使用不同的webpack版本的项目中，可能会导致构建失败，所以官网中不推荐使用全局安装，我们接下来也是使用局部安装。

项目初始化以后执行安装命令： npm i webpack webpack-cli -D

安装以后，查看安装版本

此时会发现，直接执行webpack -v会报错，因为只是针对全局的命令，项目里面的话，需要借助npx，包括后面的其他webpack相关命令也是这样的。

安装完成以后，在项目根目录新建文件夹src，然后在src下新建index.js文件。

做了最简单的操作以后，就可以进行打包了：

这里使用命令npx webpack进行打包，没有指定入口文件，代表采用默认路径下（根目录-->src-->index.js）的文件作为入口文件，如果要采用其他文件作为入口文件，则需要在打包是进行指定：

上面这个就是指定根目录下的test.js作为入口文件。

打包完成以后，就会在根目录下生成一个dist文件夹。

webpack配置文件

默认配置文件

在上面的简单操作中，我们没有对项目进行任何配置，这种零配置的项目是很弱的，在正常项目中，总会根据特定的需求进行相应的配置。

刚刚执行命令npx webpack test.js时，表示使用根目录下的test.js为入口文件进行打包处理，默认打包后的模块名称为main.js，放在根目录下的dist文件夹下。零配置的话，全部都是默认的，要想进行自定义，就需要使用到webpack的配置文件进行自己想要的配置。

webpack有默认的配置文件webpack.config.js，刚刚上面的两个打包命令：

都没有指定配置文件，则代表使用默认的配置文件webpack.config.js进行打包（上面项目中不存在webpack.config.js这个文件，则表示零配置。如果项目中存在这个配置文件，并且打包的时候，没有指定配置文件，那么就会默认选中webpack.config.js）。

自定义配置文件

除了上面的默认配置文件以外，我们也可以自定义一个配置文件，然后在打包的时候进行指定就可以了：

这个就表示指定使用webpackconfig.js文件作为配置文件进行打包。

webpack.config.js

const path = require("path");
module.exports={
    mode:'development',  //模式：none  development  production
    // entry:"./src/index.js",   //入口文件，不指定打包后的名称，则默认为main.js
    entry:{
        main:"./src/index.js"   //指定打包后的文件名称为main.js
    },
    output:{
        path:path.resolve(__dirname,'dist'),  //打包后的文件存放的位置，必须是绝对路径
        filename:"[name].js"    //打包后的文件的名称，[]表示占位符，表示此处使用前面指定的名称，如果这里进行指定，则会覆盖前面的指定
    }
}

除了上面这些简单配置外，还可以修改打包命令，只需要修改package.json里的scripts就可以了。

修改为：

此时，我们就可以执行命令npm run bundle进行打包了。（因为npm run执行的命令，会优先使用项目工程里的包，效果和npx类似，所以这里不需要使用添加npx）

loader和module

loader是模块转换器，用于把模块原内容按照需求转换成新内容。webpack是模块打包工具，而模块不仅仅是js，还可以使css、图片或者其他格式，但是webpack默认只知道如何处理js模块，那么其他格式的模块处理，就需要借助于loader了（loader里的配置，单个是对象，多个用数组，遵循自右向左，从下到上的顺序）。

module是模块，在webpack里一切皆模块，一个模块对应着一个文件。webpack会从配置的Entry开始递归找出所有依赖的模块。

当webpack处理到不认识的模块时，需要在webpack中的module处进行配置，当检测到时什么格式的模块，就使用什么loader来处理。