为什么要使用

• 因为在开发过程中，我们会使用到一些框架，使用一些e6语法，less，scss等预编译器，这些都是浏览器不能识别的，这时候我们就需要一些打包工具，把这些编译为浏览器能读懂的js、css，才能允许，在项目上线时完成打包，还能压缩代码，兼容性处理，提高代码性能。

基本使用

• mian.js作为入口文件，npm 安装相应的包，然后npx运行bin目录下的webpack包，--mode--xxx指定生产开发模式，默认会打包到dist目录下。

• 开发环境只编译es6 模块化语法，生产环境能编译es6模块化，而且还能压缩JS代码，例如将函数的执行结果直接输出。

它的本身的功能很少，所以我们要学习的是如何处理其他资源。

五大核心

entry（入口）：从哪个文件开始打包

output（出口）：打包到哪里去

loader（加载器）：webpack只能处理json、js等文件，如果要解析其他文件的话，就要loader和Webpack来帮忙

pluging：Webpack的扩展功能

model：开发模式和生产模式两种

配置文件

文件名：webpack.confing.js，因为是在node.js中运行，使用common.js的模块化输出配置信息，包括有五大核心。使用path，node.js用于处理文件的核心模块，来处理输出文件，一般输出到根目录下的dist文件夹，文件名为main.js。

output:{

path:path.resolve(__dirname,'dist'),

filename:'main.js'

},

module:{ //加载器

//loader的配置

rules:[

        {

        }

    ]

}

webpack需要编译更复杂的资源，要配置loader来支持，需要编译的要在入口文件mian.js中引入

• 在官方文档中找到相应文件的loader处理器，下载后，在loader的配置信息中用于处理相应的文件。

• 处理预编译器（less、scss、stylus...）写的样式资源，官方文档查询需要下载的loader，安装和进行loader的配置。

• 对于图片资源的处理的话，webpack5内置了loader，如果不需要考虑性能优化的话，可以直接进行打包，不需要配置loader，否则，在配置loader时，只要加上type:"assest"，然后设置配置项parser中的相关属性，让图片大小为多少的进行编码为base64，减少网络请求的发送。

• 将文件按指定文件夹输出，更好的管理项目，output的配置中，path对应的是所有文件打包好输出的文件夹名称，filename则是入口文件打包好输出的文件夹名称，其他资源打包好输出的文件夹名称，在配置loader时，加上generator配置项，可以去官方文档看详细的配置信息。

• webpack5中，想要清空上次打包内容后进行打包，只要在output的配置中，添加clear:true即可，不需要像4中使用插件。

• 处理iconfont图标资源，使用fontclass，下载相应的css和font文件，对字体文件的输出进行配置，放在相应文件夹中就可以了。type:"assest/resource" 对文件原封不动打包，不进行base64的处理。

• 在对js的处理时，webpack能力是有限的，要用babel针对js兼容性处理，使用eslint对代码格式进行处理。

• eslint：对js、jsx的静态解析工具，安装相应的插件后，进行.eslintsrc.js文件的配置就可以使用了，配置信息包含了解析选项parserOption，配置支持es6以及模块化语法、extends，继承官方文档的规则，最重要的还是rules，以什么方式去检查。

• babel：对js进行兼容性的处理，将es6+语法转化为es5，以loader的形式处理文件，注意不要重复处理node_modules文件，使用exclude排除这些文件。

了解这些后，你就对webpack有了初步的认识，并能够进行的一定实操。