本文旨在帮助大家对快速上手Webpack，并对其核心思想有着基本逻辑，想了解更多进阶技巧请持续关注我的专栏。

初始化项目

新建一个空文件夹testWebpack

进入testWebpak目录，分别执行以下命令

npm init -y

npm install webpack webpack-cli --save-dev

使用 --save-dev来将webpack安装到项目当中而非全局当中，这是因为不同的项目会使用不同版本的webpack，webpack安装到全局可能会带来意想不到的问题。

webpack 是打包代码时依赖的核心内容， 而webpack-cli是一个用来在命令行中运行 webpack 的工具，从4.0起，在安装时就必须安装这两个东西。

Webpack从4.0起就开箱即用了，可以无需使用任何配置文件。在这种情况下，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。

基于以上认知，我们新建一个src目录，并在其下新建一个index.js文件。到目前为止，我们的目录结构如下

|-- package-lock.json
|-- package.json
`-- src
    `-- index.js

我们在package.json中添加一个名为webpack的脚本，并让它执行 webpack 命令。

"scripts": {
    "webpack": "webpack"
},

运行npm run webpack，当你发现dist目录生成并且有个main.js文件后，恭喜你，成功迈出了第一步！

初始化配置文件

正经人谁会不写配置文件！

如果项目中有CSS或其他类型的文件，这个时候再使用上面的方法是会报错的，因此，让我们在项目根目录下新建一个webpack.config.js。

Webpack 在执行构建时默认会从项目根目录下的 webpack.config.js 文件读取配置

我们给webpack.config.js写入以下代码

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './src/index.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

再次执行npm run webpack，效果一模一样，唯一的区别是main.js变成了我们定义的bundle.js。

使用Loader

让我们来引入一下CSS。

在src下新建一个index.css，然后在index.js中引入。

// index.js 文件
require('./index.css')

再次执行npm run webpack不出意外的报错了，那是因为我们缺少专门处理css的loader。

我们在配置文件中再写入css的处理规则

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './src/index.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        // 用正则去匹配要用该 loader 转换的 CSS 文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。 如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。

use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；

在重新执行 Webpack 构建前要先安装新引入的 Loader：

npm i -D style-loader css-loader

随后重新运行npm run webpack，会发现css已经被注入到bundle.js里了。

细心的同学可能已经看到控制台里的警告了

这是因为我们没有区分开发模式和生产模式，对package.json中的npm script修改如下

  "scripts": {
    "webpack": "webpack --mode development"
  },

并且在配置文件中添加mode

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './src/index.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  // 添加mode
  mode: 'development',
  module: {
    rules: [
      {
        // 用正则去匹配要用该 loader 转换的 CSS 文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

使用Plugin

你会发现，css居然在js中，虽然这不影响代码正常执行，但实在还是无法接受，如何才能把css单独提成一个文件呢？

这就需要plugin出马了！

我们将配置文件改造一下

const path = require('path');
// const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // JavaScript 执行入口文件
  entry: './src/index.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 用正则去匹配要用该 loader 转换的 CSS 文件
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
};

同样的，安装插件依赖npm install --save-dev mini-css-extract-plugin

重新运行npm run webpack就会发现dist目录下有个main.css了。

Webpack核心概念

虽然Webpack 功能强大且配置项多，但我们只要理解了其中的几个核心概念，就能随心应手地使用它。 Webpack 有以下几个核心概念。

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

总结

在本章中，我们学到了怎么使用 webpack 去打包css和js，以及分离他们。在这个过程中，我们亦掌握了 webpack 的核心概念，了解了这些概念，后续对我们使用 webpack 会有非常大帮助。

在下一篇中，我们会开始在项目中编写简单的代码，再使用webpack进行编译，来更加深刻的去认识这一节所学的内容。

如果这篇文章对你还有所帮助的话，请务必赏我一个大大的赞哦。

关注我，一起学习webpack！