作为一个webpack小白的我，最近也开始学习了，但是苦于不知道怎么学，最近看了一些讲解webpack的视频还是觉得挺不错的，最起码对于刚入门的我来说还是觉得学到了不少，下面是最近看视频和文章学习到的一些内容，有问题请多指教哦。

1. webpack作用

webpack的核心功能

打包。

什么是打包

简而言之打包就是将多个文件合并到一个js文件中，也就是说开发完成后合并的过程就是打包。

为什么使用webpack

我们在开发时在html页面都是通过手动引入我们需要的多个文件，如果打包成一个文件，会减少http请求数，能让我们的页面更快的加载和显示。而且webpack还有很多其他的功能，例如开启本地服务器，边写代码边更新，压缩等功能。总之就是给我们带来了很多便利的功能。

2.webpack的常用术语解释

Module

模块，分割的代码单元，webpack 中的模块可以是JS，CSS，LESS，TS，JSX等静态文件，可以说我们手写的一个个的文件都是module，他们是webpack处理文件的单位。

bundle

bundle （输出束），许多不同的模块生成，可以理解成最终的输出文件。

chunk

chunk就是webpack根据文件中的引用关系生成chunk文件。

大概可以理解为：我们手写的文件是module,webpack针对文件中引用处理后的文件是chunk,最终生成的输出文件是bundle。

3 webpack的5个核心概念

入口(entry)

Entry(入口),指示 webpack 应该使用哪个模块(module)作为入口开始打包，并且建立其内部依赖图。入口可以是单入口也可以是多入口。

输出(output)

output指示多个文件合并成一个文件（bundle）以后在哪里输出，怎么命名。

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

loader的使用步骤是1.下载，2.使用

插件(plugin)

plugin用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

plugin的使用步骤是1.下载，2.引入，3.使用

模式(mode)

mode有development（开发模式），production(生产模式），分别提供开发者调试的环境和代码优化上线的环境。

4 webpack初始化

1. 生成package.json

首先创建文件夹webpack-demo文件夹，在webpack-demo目录下执行npm init -y ，生成package.json配置文件

2. 安装webpack webpack-cli

执行npm install webpack webpack-cli –save-dev,执行成功后生成了node-modules文件夹

注：命令行中-g -D -S的区别

-g –global的简写，对模块进行全局安装,-g安装的模块是这台电脑的项目都能用
-D –save-dev 对模块进行局部安装，局部的意思是只针对当前项目，是开发环境用到，生产环境用不到，模块写入到package.json的devDependencies 对象中。

devDependencies对象，是我们开发的时候需要用到的一些包，只用于开发阶段，真正打包上线的时候并不需要这些包，因为这些工具只是你用来打包代码的，是用来识别特定文件以及代码，帮助我们生产最终文件的。

模块安装到项目文件夹下的node_modules文件夹下

-S –save的简写，对模块进行全局安装，不止用于开发环境，也用于生产环境，模块写入到package.json的dependencies 对象中。

dependencies对象，这个与devDependencies不同，是需要发布到生产环境中的，就比如你要跑一个基于vue的项目，所以需要vue.js来支持，vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中，并一同发布到生产环境。

模块安装到项目文件夹下的node_modules文件夹下

3. 创建配置文件

在根目录下创建webpack.config.js

使用该配置文件时执行webpack 命令即可执行打包，但是有个疑问就是配置文件一定要是这个吗，其实不是的，例如我想要使用xxx.js作为配置文件呢？我们可以通过运行命令webpack –config xxx.js来指定配置文件。

5 webpack开发环境配置

开发环境配置需要设置配置文件 mode:'development'

1. 打包css

我们知道webpack只能理解js和json文件，无法直接对css打包，这个时候就需要借助css-loader,css-loader是用来解析css,把css加载到js中。

编写文件

安装css-loader

npm i css-laoder -D

配置css-loader

结果

可以看到index.css已经被引入

2. 打包less

首先less.css要被less-loader加载，转化为css，然后再被css-loader加载到js中

编写文件

安装 less less-loader css-loader

less-loader安装时需要同时安装less
npm i less-loader less css-loader -D

配置less-loader css-loader

结果

执行了webpack后报错了，报错内容如下

原因是less-loader安装的版本过高
解决办法是：1.npm uninstall less-loader 2.npm install less-loader@5.0.0

less打包成功。

3. 打包html

打包html需要用到html-webpack-plugin，默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS），我们也可以自己创建html文件，不需要再html引入文件，使用这个插件后会自动引入

编写文件

下载plugin包

npm install --save-dev html-webpack-plugin

配置文件

结果

执行结果出错，还是因为html-webpack-plugin版本过高，解决办法1.npm uninstall html-webpack-plugin,2.npm install i html-webpack-plugin@4.4.1 -D

最终结果

4. 展示css效果

通过以上步骤mian.js已经被引入到html，但是实际上css并没有生效，也就是说html的样式并没有被改变，因为css其实并没有被应用到html中，这个时候就需要用到style-loader了。style-loader的作用是将css-loader解析的内容挂载到style标签下，并且将style标签加入到html文档中。

编写文件

同上

下载style-loader

npm i style-loader -D

配置文件

结果

可以看到样式已生效。

4. 打包图片资源

图片资源可以在样式中引用，比如说背景图片，也可以直接在html中使用，file-loader或者是url-loader都是可以处理图片资源的，他们的区别就是url-loader可以设置在图片大小低于某个阈值的时候base64处理，这样可以减少请求，但是他们默认都不能处理html中的图片，html中的图片可以通过html-loader引入，从而能被url-loader进行处理。
-编写文件

下载url-loader或者file-loader以及html-loader
npm install --save-dev html-loader url-loader file-loader
配置文件

结果
不出意料，又报错了，还是下载版本过高的原因，1.npm uninstall html-loader url-loader file-loader,2.npm install html-loader@0.5.5 url-loader@3.0.0 file-loader@5.0.2 -D

5. 打包其他资源

引入其他文件

配置文件

-结果

6. devServer

devServer只在开发环境中生效,如果需要derServe中的配置生效，需要执行webpack-dev-server命令，并且如果修改了其中的配置需要重新执行命令。

devServer.open

在DevServer第一次构建完成时，自动用浏览器打开网页，默认是true

devServer.hot

启动 webpack 的模块热替换，在修改源代码后能实时的在浏览器看到更新后的效果

devServer.compress

为每个静态文件开启 gzip压缩

devServer.contentBase

项目构建后路径

devServer.port

指定端口号

devServer.proxy

开启代理

6 webpack生产环境配置

生产环境中mode需要配置成production

1.提取 css 成单独文件

需要用到mini-css-extract-plugin，经过css-loader的处理，css文件已经被整合到js中，这个我们需要的是把这些css 提取成一个单独的css文件，ini-css-extract-plugin插件loader的作用就是提取js中的css成单独的文件

编写文件

下载插件

npm install --save-dev mini-css-extract-plugin@0.9.0

注：由于很多下载版本过高，都会导致后面运行webpack报错，后面下载就直接加上版本号

配置文件

结果

2. css 兼容性处理

css 兼容性处理主要是针对css3 的样式，加上前缀操作，我们需要下载postcss-loader postcss-preset-env，然后在package.json中配置browserslist，postcss通过找到package.json中browserslist里面的配置加载指定的css兼容性样式。

编写文件

略

下载loader

npm install --save-dev postcss-loader postcss-preset-env

配置文件

package.json中配置browserslist

              // 开发环境
              //last 1 代表兼容到最后一个版本
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
复制代码

3. 压缩css

下载

npm install --save-dev optimize-css-assets-webpack-plugin

配置文件

4. js 语法检查

js 语法检查的大概过程是下载 eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import，下载后配置webpack.config.js配置文件，其中需要注意的是我们只需要对我们手写的js语法检查，node_modules中的js是不需要语法检查的，因此需要排除这个文件夹，另外需要在package.json中配置中 eslintConfig以便按照这个规则来进行语法检查,而我们使用的是airbnb的规范，因此上面还安装了eslint-config-airbnb-base。

下载

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

配置文件

配置package.json

"eslintConfig": {
     "extends": "airbnb-base",
      "env": {
         "browser": true 
        }
  }
复制代码

5. js 压缩

生产环境下只需要设置 mode: 'production'，会自动压缩 js 代码

6. html 压缩

html压缩用到的是html-webpack-plugin插件

下载