这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

webpack

webpack介绍

webpack是什么？

ebpack被定义为现代 JavaScript 应用程序的静态模块打包器(module bundler)，是目前最为流行的JavaScript打包工具之一。

webpack会以一个或多个js文件为入口，递归检查每个js模块的依赖，从而构建一个依赖关系图(dependency graph)，然后依据该关系图，将整个应用程序打包成一个或多个bundle。

由于webpack是用nodejs编写的，所以它依赖的运行环境就是nodejs。也正因为这一点，webpack只能识别JavaScript，所有非JavaScript（包括HTML，CSS，Typescript等）编写的文件都需要经过处理，这是借助对应的loader实现的。

webpack使用的是nodejs默认的模块系统：commonjs，借助nodejs提供的API来操作待打包项目的源文件（如fs模块、path模块等）。webpack将这些文件整合压缩后，输出到一个特定的目录下（通常是dist）。处理过的dist一般会被直接上传到静态资源服务器使用。

为什么要有打包工具

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

基本配置

5大核心概念

entry（入口）

指示 Webpack 从哪个文件开始打包

output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

plugins（插件）

扩展 Webpack 的功能

mode（模式）

开发模式：development
生产模式：production

const path = require('path')

module.exports = {
    //入口
    entry: './src/main.js',
    //输出
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: 'main.js'
    },
    //加载器
    module: {
        rules:[

        ],
    },
    //插件
    plugins: [

    ],
    //模式
    mode: 'development'
}

开发模式

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

编译代码，使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

处理样式资源

介绍

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用官方文档找不到的话，可以从社区 Github 中搜索查询

css-loader

首先，你需要先安装 css-loader：

npm install --save-dev css-loader
npm install --save-dev style-loader

然后把 loader 引用到你 webpack 的配置中。如下所示：

file.js

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

然后运行 webpack。

less-loader

首先，你需要先安装 less 和 less-loader：

$ npm install less less-loader --save-dev

然后将该 loader 添加到 webpack 的配置中去，例如：