Webpack简介

Webpack是什么

1.前端资源构建工具；2.静态模块打包器（module bundler）

举个例子：比如你用最原始的写网页的方式，写纯html文件，想使用less文件，但是浏览器本身是不识别less的，肯定需要一个工具将less编译成css，这是一个点；如果你还想写点js代码，想使用jquery，就要先在终端npm init，定一下package.json里的name，其他东西都默认，生成package.json文件，再npm i jquery，就会生成node_modules文件夹，jquery就在里面。假如你用ES6的模块化写法引入了jquery，浏览器会报语法错误，浏览器并不能识别，这又是一个点。

这样就有两个问题，less浏览器不认识，ES6的module浏览器也不认识，怎么办？肯定就需要一个个小工具将这些东西编译成浏览器能识别的东西，这些小工具你以前就要分别进行维护，会非常麻烦，所以前端出现了一个概念：构建工具。这个大工具包含了这些小工具的功能，你只要关心这个大工具就行了。

第二件事，你肯定会在文件中引入很多的各种各样的资源，js的资源，样式资源，图片、字体等其他资源，这些资源都要交给构建工具去处理，那构建工具怎么去处理？首先需要告诉webpack一个打包的起点（入口文件），它会将每个依赖都记录好，形成树状图，再引入进来，形成chunk（代码块），再对代码块进行各项处理，比如将less编译成css，将js变成浏览器能识别的语法，这些操作叫做打包，打包输出的的东西叫做bundle（静态资源）。

屏幕截图 2021-08-09 221030.png

Webpack的五个核心概念

entry

指示webpack以哪个文件为入口开始打包，分析构建内部依赖图
output

指示打包后的bundles输出到哪，怎么命名
loader

让webpack能处理那些非js文件（webpack自身只理解js和json，像css或者img它是不认的），有点像翻译官的角色
plugins

用于执行范围更广的任务，从打包优化和压缩到重新定义环境变量等
mode

development 开发模式

production 生产模式

Webpack初体验

npm init

npm i webpack webpack-cli -g 以前装过也没事，新的会把旧的更新掉 webpack-cli用于在命令行中运行 webpack

npm i webpack webpack-cli -D 会添加到开发依赖中，等价于--save-dev

打包生成后的main.js文件，用node是可以直接运行的；你在build目录下新建index.html文件，引入main.js，也是可以看到结果的

webpack能处理js/json资源，不能处理css/img等其他资源，你要是直接在index.js里引入css文件再去打包，webpack会报错

打包样式资源

那我如果要打包样式资源，要怎么做呢

要在src同级目录下新建webpack.config.js，写好配置
为了避免每次都要下webpack和webpack-cli，所以在最外层下载好，然后还是在最外层下载css-loader和style-loader
直接到‘打包样式资源’文件夹下运行webpack指令即可完成打包

在build目录下新建index.html引入built.js，即可看见css生效，而且打开调试工具，在index.html的head标签里可以看见多了style标签，引入了样式。

css文件可以处理，less文件能不能处理？

直接webpack是不行的，需要下载less和less-loader，再在webpack.config.js的loader里添加less文件的配置，最后webpack即可打包成功。

打包html资源

npm安装html-webpack-plugin，在webpack.config.js里的plugins里先写

new HtmlWebpackPlugin()

然后执行webpack，然后你就会发现，build目录下多了一个index.html，而且它引入了built.js，但是跟我们原来在src下写的index.html不一样了，而且我们原来在index.html里根本就没引入index.js，这是问题。

所以你要写成

new HtmlWebpackPlugin({
      // 复制'./src/index.html'文件，并自动引入打包输出的所有资源（js/css）
      template:'./src/index.html'
})

此时就可以正确地输出index.html了，而且我们不需要在src的index.html里引入index.js，它会在打包时自动引入。

打包图片资源

对于webpack5，你就算不给图片资源单独做配置，也是可以打包成功的。

但是webpack4不行，会报错，所以还要针对图片配置loader。

很不幸啊，在webpack5的时候，url-loader已经弃用了，如果你还想用webpack4的配置形式，就要多写点东西，也能打包成功的，要不然打包会成功，但是图片就是不显示。

{
        test:/.(jpg|png|gid|jfif)$/,
        //使用一个loader可以写loader
        //需要下载url-loader file-loader
        loader:'url-loader',
        options:{
          //图片大小小于10kb，就会被base64处理
          //优点：减少请求数量（减轻服务器压力）
          //缺点：图片体积会更大（文件请求速度更慢）一般8-12kb以下的图片都没问题
          limit: 10 * 1024,
          esModule:false,
        },
        type:'javascript/auto'
}

上面的这种方式，是对写在样式中的图片有效的，但是对于在html文件中img标签还是没用，所以还要写loader

对于图片资源的打包，参考webpack官网对资源模块的介绍是很好的。

打包其他资源

什么叫其他资源，就是不用做任何处理就输出的资源，比如字体

可以去www.iconfont.cn/（阿里的矢量图标库）去下载字体，可以从这个网站下载代码（是个压缩包），解压压缩包里有图标的使用说明，我们用Font class这种方式使用就可以了。

webpack4的方式是用file-loader去打包

devServer

下包

npm install --save-dev webpack-dev-server

启动

npx webpack serve

你的webpack是因为进行了全局安装，所以直接执行webpack命令可以做一系列操作，但是webpack-dev-server是本地安装的，所以要用npx指令，执行这个命令不会有任何文件输出，你可以把dist文件夹删掉，验证它是不会输出任何东西的。

Webpack笔记