前言

Loaders | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com) 可以从webpack官网学习

什么是webpack

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

功能介绍

初体验

下载依赖

webpack 五个核心概

1. Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2.Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命

3. Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)

4. Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

5.Mode

准备webpack配置文件

注意：配置了webpack文件（ webpack.config.js）, 执行只要输入 npx webpack

开发模式介绍

处理样式资源

1.处理CSS资源

2.处理less资源

注意：less-loader是将less 文件编译成css文件

3.处理sass资源

4.处理图片资源

asset 用于把图片转换为base64

5.修改输出文件目录

6. 自动清空上次打包的内容

7.处理字体图标资源

官方网www.iconfont.cn ，添加到购物车，然后添加到项目，再下载到本地

解压的文件，demo_index 为使用教程

入口文件main.js引入 iconfont.css文件

webpack.config.js配置文件

打包成功后，最后使用

8.处理其它的资源

如需要处理音频，视频等资源，直接在处理字体图标的test,加上要匹配的后缀就可以了，如mp3.mp4,avi 等

处理js资源

eslint

在webpack使用eslint

babel

可以统一写在webpack.config.js文件配置中

也可以分开写，webpack.config.js + babel.config.j文件中，

当要兼容promise 类的语法时，需要配合core-js使用

安装 npm i core-js
配置

rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets: [
                            ["@babel/preset-env", {
                            targets: {
                              "chrome": "58",
                             
                            },
                            "corejs": "3",
                            "useBuiltIns": "usage"
                          }]
                          ]
                    }
                }
            }
        ]