前言：webpack已经更新到了5.37.0，变化最大的是webpack-3到webpack-4的更新，webpack-4当时推行的一句话就是：0配置启动。本文使用的webpack4进行学习,webpack4学会之后，webpack5还不是信手拈来，这篇文章是从0基础开始教学，有什么问题，大家可以给我留言。

一、前期准备

1.1环境搭建

第一步：创建一个文件夹，新增src目录

第二步：index.js文件中

console.log("Hello World!!!")
复制代码

第三步：.npmrc文件

设置npm源为淘宝,这个是npm默认的配置文件，也可以全局设置。

registry = https://registry.npm.taobao.org/
复制代码

第四步：初始化package.json文件

npm init -y
复制代码

第五步：安装npm包

webpack4以后必需要安装webpack-cli才能运行打包，这些版本号推荐大家安装的。

npm install webpack@4.43.0 webpack-cli@3.3.12 -D
复制代码

第六步：在package.json文件中，配置启动命令

{
    "script":{
        "build":"webpack"
    }
}
复制代码

二、相关概念了解

chunk：是代码片段，一个模块被webpack打包编译处理生成的代码片段

chunks：是chunk组

bundle：webpack编译后输出的成果文件，也就是dist目录下面的所有文件称为bundle

module：NodeJS万物皆模块，每个文件就是一个模块

loader：webpack默认只支持以.js、.json结尾的文件，其他类型的文件需要安装指定loader编译打包。（多个loader的执行顺序是自后往前）

plugin：拓展webpack的功能

关系描述：一个bundle文件，由至少一个chunk组成（至少一个模块或者多个模块）

概念不了解没关系，跟着文章往下走，自然而然就会理解。

三、项目实操

根目录新建webpack.config.js文件，这个是webpack默认的配置文件，运行webpack的时候，会从这个文件里面读取配置。

3.1基本使用

零配置使用webpack

webpack4出来之后，一直推行的一句话就是零配置启动，我们看看到底怎样零配置启动？

项目搭建的时候已经配置过脚本命令，现在我们直接运行npm run build命令，从下面的图片可以看到成功打包出dist目录。

零配置使用webpack，相当于以下配置：

// 在`webpack.config.js`文件中
const path = require ('path');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve (__dirname, './dist'),
    filename: 'main.js',
  },
};
复制代码

3.2加入loader

loader的使用背景：由于webpack中默认只支持以 .js和.json 结尾的文件，想要处理别的文件，就需要安装相应的loader，这个就是loader的使用背景。

loader的执行顺序是自后往前，一个loader只做一件事情

场景1：支持.css结尾的文件，接下来我们看怎么去配置。

第一步：安装依赖

npm install css-loader style-loader -D
复制代码

第二步：修改webpack.config.js文件

const path = require ('path');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve (__dirname, './dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
复制代码

第三步：新建css/index.css文件，并在index.js引入

// css/index.css文件中
body{
    background-color: aqua;
}

// index.js文件中
import './css/index.css';
复制代码

第四步：运行命令打包

npm run build
复制代码

第五步：生成的dist目录中，新建index.html文件,将生成main.js引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>
复制代码

第五步：浏览器打开index.html文件，样式设置成功。

场景2：支持.scss语法

第一步：安装依赖

npm install sass-loader@9.0.0 sass -D
复制代码

这边说一下为什么要安装9.0.0版的sass-loader?因为我这边用的时webpack4，不指定版本的话，默认安装的是sass-loader的最新版本，最新版本只支持webpack5

第二步：新建.scss文件，并在index.js文件中引入

第三步：修改webpack.config.js文件

const path = require ('path');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve (__dirname, './dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
     
    ],
  },
};

复制代码

第四步：运行命令打包

npm run build
复制代码

第五步：生成的dist目录中，新建index.html文件,将生成main.js引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="height:40px"></div>
    <script src="./main.js"></script>
</body>
</html>
复制代码

第五步：浏览器打开index.html文件，样式设置成功。

场景3：使用postcss实现对任意浏览器兼容

对于前端来说，如果有人要求你兼容IE8浏览器，那你是不是有砍死他的冲动。别急，我们今天就来看一下使用webpack，css怎样兼容任意版本的浏览器。

上面已经支持了.scss和.css文件，我们现在浏览器里面看一下我们写的css被编译成了什么东西。从下图我们可以看到在浏览器里面只是普通的编译，并没有任何的兼容处理。

postcss相关介绍

先附上postcss的中文文档

简单叙述一下postcss是一个平台，postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：

使用下一代css语法

自动补全浏览器前缀

自动把px代为转换成rem

css 代码压缩等等

postcss 只是一个工具，本身不会对css一顿操作，它通过插件来实现功能。

我们要实现对浏览器的兼容，就是通过postcss中的插件autoprefixer来实现的。

postcss在项目中的配置

第一步：安装依赖

npm install postcss postcss-loader autoprefixer -D
复制代码

第二步：修改webpack.config.js文件

const path = require ('path');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve (__dirname, './dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
    ],
  },
};
复制代码

第三步：项目根目录新建postcss.config.js文件（这个是postcss默认的配置文件）

module.exports = {
  plugins: [
    require ('autoprefixer') ({
      overrideBrowserslist: ['last 2 versions', '> 1%'],
    }),
  ],
};
复制代码

第四步：修改index.scss文件，我们使用display:flex来测试

第五步：运行npm run build命令打包

第六步：生成的dist目录中，新建index.html文件,将生成main.js引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>
复制代码

第七步：浏览器中看一下编译结果，从下面图中我们可以看到，postcss对display:flex做了兼容处理

知识拓展`browserslist`

首先通俗的来说，browserslist就是一个目标浏览器的集合，你使用了autoprefixer这个插件，你就得告诉他，你就要告诉他你想兼容哪些浏览器，官方一点的说就是你要给他配置浏览器的集合。我上面require(“autoprefixer”)后面跟着配置，是配置postcss插件的一种方式

Browserslist的配置可以跟我一样直接粗暴的在autoprefixer后面配置,也可以放在package.json文件中，也可以放在.browserslistrc这个配置文件中。所有用到Browserslist的工具，都会去主动查找browserslist的配置

简单先介绍一下项目中使用的浏览器集合：

last 2 versions：浏览器的最近俩个大版本
> 1%：市场占有率大于1%的浏览器

常见集合范围说明

范围	说明
`last 2 versions`	假如IOS 12 是最新版本，那么向后兼容俩个版本就是 IOS 11 和 IOS 12
`> 1%`	全球超过1%人使用的浏览器，类似`> 5% in US`则指代美国5%以上用户
`cover 99.5%`	覆盖 99.5%主流浏览器
`chrome > 50`、`ie 6-8`	指定某个浏览器版本范围
unreleased``versions	说明有浏览器的beta版本
`not ie < 11`	排除 ie11 以下版本不兼容
`since 2013`、`last 2 years`	某时间范围发布的所有浏览器版本
`maintained`、`node versions`	所有被 node 基⾦会维护的 node 版本
`current node`	当前环境的 node 版本
`dead`	通过 last 2 versions 筛选的浏览器中，全球使⽤率低于 0.5% 且官⽅声明不在维护或者事实上已经两年没有再更新的版本
`defaults`	默认配置， > 0.5% last 2 versions Firefox ESR not dead

通过命令查看相应集合选中的浏览器

npx browserslist "last 2 versions,>%1"
复制代码

3.3加入插件

插件的使用背景：webpack中使用插件，就是为了拓展webpack的功能。

场景1：每次build时，删除dist目录

比如我们平时在使用vue-cli创建了一个项目，每次打包，dist目录都会先被删除，然后再重新build，那么这个功能我们怎样去实现呢？

安装依赖

npm install clean-webpack-plugin -D
复制代码

修改webpack.config.js文件

const path = require ('path');
const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve (__dirname, './dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin ()],
};
复制代码

3.每次执行npm run build时，就会删除dist目录，这也是webpack中plugin的使用以及配置的方式。

场景2：每次build时，新建index.html文件

文章上面我们每次生成dist目录都要手动去新建一个index.html并且手动来引入生成的js文件，这会很麻烦。下面我们就看一下，如何用插件来帮我们实现这一步操作。

第一步：安装依赖

npm install html-webpack-plugin -D
复制代码

第二步：项目中配置
在webpack.config.js文件中配置

const path = require ('path');
const htmlwebpackplugin = require ('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve (__dirname, './dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [new htmlwebpackplugin ()],
};
复制代码

第三步：我们每次运行npm run build命令时，都会在dist目录里面生成index.html文件

`html-webpack-plugin`支持配置模板

html-webpack-plugin配置模板之后，就会根据我们的模板html文件，来生成。

新建src/index.html文件，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>Hello World</div>
</body>

</html>
复制代码

修改webpack.config.js文件

const path = require ('path');
const htmlwebpackplugin = require ('html-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new htmlwebpackplugin ({
      template: './src/index.html',
    }),
  ],
};
复制代码

场景3：抽离css文件

如果我们想在打包的时候，将css文件单独放到一个css目录中，这样目录结构也会清晰，那这种操作我们需要怎样去操作呢？

我们使用mini-css-extract-pluginc这个包来实现我们的需求

第一步：安装依赖

npm install mini-css-extract-plugin -D
复制代码

第二步：修改webpack.config.js文件

const path = require ('path');
const htmlwebpackplugin = require ('html-webpack-plugin');
const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
const minicssextractplugin = require ('mini-css-extract-plugin');
module.exports = {
  ...
  module: {
    rules: [
       ...
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          minicssextractplugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    ...
    new minicssextractplugin ({
      filename: 'css/[name].css',
    }),
  ],
};
复制代码