前言

不进行其他打包工具和 webpack 的对比，仅介绍 webpack 做的工作，此系列将对webpack进行梳理，以及快速上手，立马用起来。

这里使用的版本依赖:
"webpack": "^5.74.0"
"webpack-cli": "^4.10.0"

下面是项目目录：

什么是Webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

为什么选择 Webpack

1. 模块化开发

在 webpack 中一切皆模块，js、css、图片、字体都是模块，而且支持静态解析、按需打包、动态加载、代码分离等功能，帮助我们优化代码，提升性能。

2. 新语法

Javascript、CSS 的语法规范在不断更新，但是浏览器的兼容性却不能同步的更新，可以通过 webpack 预处理器进行编译，自由的使用 JS、CSS 等语言的新语法。

webpack 使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。

Webpack 的基本内容

1. Webpack依赖图

任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有 依赖关系 。这使得 webpack 可以接收非代码资源(non-code asset)（例如图像或 web 字体），并且可以把它们作为依赖提供给你的应用程序。

在项目根目录下创建 webpack.config.js 文件，并在当中添加如下代码

const path = require('path');

module.exports = {
    entry:'./src/index.js', //entry属性，后面接文件路径，指定以哪个文件作为入口文件
    output:{
        filename:'build.js', //打包后输出的文件名称
        
        //输出目录 path 的绝对路径
        // __dirname,用来动态获取当前文件模块所属的绝对路径
        // path.resolve()时相当于是在当前文件夹下拼接了一个文件路径
        path:path.resolve(__dirname,'dist')
    }
}

根据 entry 属性设置，项目中的index.js文件为主要的入口文件，要运行什么程序，需要在这个文件中引入。

2. CSS的使用

首先用最直接的方式创建元素，在JS文件夹下创建 title.js ,并输入：

function fn() {
    let oTitle = document.createElement('h3');
    oTitle.innerHTML = '这是一个标题';
    oTitle.className = 'title';
    return oTitle
}

document.body.appendChild(fn());

在CSS文件夹下创建 style.css

.title{
    color:pink;
}

此时在 title.js 中引入 style.css ，然后需要在 webpack.config.js 中规定的入口文件 index.js 中把 title.js 引入，到这里就基本完成了，使用命令 npm run dev 进行打包，这个时候控制台会报错误，不用担心，这个错误是正常的，因为，webpack不会直接识别CSS类型的文件，处理报错也很简单，只需这样：

import 'css-loader!../css/style.css';

重新运行命令 npm run dev 进行打包，项目会自动生成dist文件夹

最后在 html 文件中引入 build.js，并运行 html ，就能看到页面了。

你会发现页面只有文字，样式没有出来，疑惑,不是引入样式了吗？

这里就说说 import 'css-loader!../css/style.css'; ，css-loader!,添加这个只是能够识别，样式并不会显示到页面，想要样式生效，就需要使用到 loader。

3. 加载CSS

需要使用到 css-loader、style-loader

这里我们直接下载：
npm i css-loader -D
npm i style-loader -D

先来说说这两个分别的作用
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
style-loader把 CSS 插入到 DOM 中。

安装完成后，还是回到 webpack.config.js,接着在output下面配置：

module:{
    rules:[
        {
            test: /\.css$/, //使用正则匹配.css后缀的文件
            //style-loader,css-loader有执行先后顺序，不然打包会出错
            use: ['style-loader','css-loader']
        }
    ]
}

配置完成后，到引入CSS文件的地方，把 css-loader!去掉，不然控制台会报import错误。

然后重新打包项目运行页面，样式效果就出来了。

总结

本文主要是讲解webpack的配置，以及对CSS文件的处理，让你对W、webpack有一个了解。
同时，下一篇将讲解《CSS的兼容处理》敬请期待

Webpack5基础实践篇

前言