Webpack5 快速入门

1. webpack 介绍

webpack 官网: https://webpack.js.org

一、webpack  是什么？

webpack 是当前市场上最流行的打包工具

webpack 是代码编译工具，webpack 是一个用于现代 J**aScript 应用程序的静态模块打包工具，俗称: 打包工具

二、为什么需要打包工具？

开发时，我们会使用框架（Vue、React），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。这样的代码浏览器是不能识别的，要想在浏览器运行必须经过编译，变成浏览器能识别的 JS、CSS 等语法，才能正常运行。

所以，我们需要打包工具帮我们完成这件事，除此之外，打包工具还能压缩代码、做兼容性处理，提升代码性能等

2. webpack 基本使用

构建 JS 模块化语法

├── public│   └── index.html└── src    ├── js    │   └── utils.js    └── main.js

src/js/utils.js

export const sum = (...args) => {    return args.reduce((sum, item) => sum += item, 0)};

src/main.js

import { sum } from './js/utils';console.log(sum(1, 2, 3, 4, 5));

在 public/index.html 中引入 src/main.js

<script src="../dist/main.js"></script>

初始化 npm 项目，安装 webpack 依赖，进行打包

npm init -ynpm i webpack webpack-cli -Dnpx webpack ./src/main.js --mode=development

3. webpack 5大核心概念

Webpack 的配置是围绕 5 大核心概念展开的，这五个概念非常重要

一、entry (入口)

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

二、output (输出)

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

三、loader (加载器)

webpack 本身只能处理 js，json 等资源，其他资源（vue，css，scss）需要借助相应的 loader，Webpack 才能解析

四、plugins (插件)

扩展 Webpack 的功能

五、mode (模式)

开发模式 (development)、生产模式 (production)

4. webpack 配置文件

创建配置文件，配置 entry 入口

在项目根目录下新建文件: webpack.config.js，文件名称必须是这个，文件内容如下所示:

module.exports = {    entry: "./src/main.js"};

output 输出

以下配置示例中的 output 中 path 和 filename 是默认值

// nodejs 核心模块，专门用来处理路径问题const path = require("path")module.exports = {    // 入口    entry: "./src/main.js", // 相对路径    // 输出    output: {        // 输出路径        // __dirname 是 nodejs 的变量，代表当前文件所在目录        path: path.resolve(__dirname, 'dist'), // 绝对路径        // 文件名        filename: "main.js",    }};

5. webpack 运行脚本

修改 package.json 文件，添加一个运行脚本。懂得都懂，添加后就可以使用 npm run build 命令进行打包了

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

6. webpack 处理样式资源

一、处理 css 资源

创建 src/css/index.css 文件，文件内容如下:

.box1 {    width: 150px;    height: 150px;    color: red;    font-size: 18px;    background: lightgreen;}

在 src/main.js 中导入 css 文件

import "./css/index.css"

执行打包命令，你就会看到以下错误提示。这是因为 webpack 默认无法处理 CSS 资源，需要安装并配置 css 加载器

ERROR in ./src/css/index.css 1:0Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

安装加载 css 资源所需的 loader【吐槽: webpack 官网这个坑货，给的安装命令中没有 style-loader】

npm install css-loader style-loader -D

修改 webpack.config.js 配置文件，检测 css 文件，使用 loader 进行处理

module.exports = {    // 加载器    module: {        rules: [            // loader 配置            {                // 只检测 .css 后缀的文件                test: /\.css$/i,                // loader 的执行顺序: 从右到左                // css-loader 将 css 资源编译成 commonjs 的模块到 js 中                // style-loader 将 js 中的 css 通过创建 style 标签添加到 html 文件中生效                use: ["style-loader", "css-loader"],            },        ],    },};

二、处理 less 资源

创建 src/less/index.less 文件，文件内容如下:

@color: purple;.less {    width: 150px;    height: 150px;    color: @color;    font-size: 20px;    background: lightcoral;}

在 src/main.js 中导入 less 文件

import "./less/index.less"

安装加载 less 资源所需的 loader

npm install less less-loader --s**e-dev

修改 webpack.config.js

module.exports = {    module: {        rules: [            {                test: /\.less$/i,                use: [                    // compiles Less to CSS                    "style-loader",                    "css-loader",                    "less-loader",                ],            },        ],    },};

三、处理 scss 资源

创建 src/scss/index.sass 文件，文件内容如下:

$color: bluebody    .sass        width: 150px        height: 150px        color: $color        font-size: 20px        background: yellowgreen

创建 src/scss/index.scss 文件，文件内容如下:

$color: black;body {    .scss {        width: 150px;        height: 150px;