这是我参与「第四届青训营」笔记创作活动的第2天

webpack理解及入门

1.引入

在我们目前的开发学习过程中，还只是直接将html，css，javascript写在同一个文件或者是将三个分成三个独立的文件，因为目前我们的项目代码量非常的少。但是有没有想过，当我们需要做一个大型的项目时，把所有的css，js的代码写在一个文件里面是非常不利于管理的。

因此，在日常的开发中，我们通常使用webpack来管理代码。但是对于很多的前端开发者来说,并不需要思考这些问题,日常的开发中根本就没有面临这些问题:

这是因为目前前端开发我们通常都会直接使用三大框架来开发: Vue、React、 Angular ;

但是事实上，这三大框架的创建过程我们都是借助于脚手架( CLI)的;

事实上Vue-CLI、create-react-app、 Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的;

——webpack官网

左边是我们开发时用到的所有类型的文件，右边是我们打包好的文件

如图，这就是一个标准的webpack打包的项目文件，每一个文件夹都只负责该版块。

2.使用webpack

2.1使用前提

webpack的运行环境是依赖node环境的，所以我们电脑上必须要有node环境（在node官网下载node），在终端中命令 node -v 查看当前安装的node版本。

2.2 安装webpack

在项目文件夹中输入命令 npm install webpack 安装好webpack包

2.3 webpack的基础使用

首先我们先写一些简单的html与javascript文件，

当我们在使用很多es6的语法时，浏览器会不能识别而报错，因此使用webpack可以将其转化为浏览器可以识别的代码。

在相关文件夹终端中输入npx webpack(npx会优先使用本地的webpack包) 即可开始打包，并会将其放入dist文件夹里

打包后的代码可以直接被浏览器识别

配置脚本

3配置webpack loader

webpack打包任何一种类型的资源都需要配置

创建 webpack.config.js文件并导出

const path=require('path')

module.exports = {
    entry: "./src/index.js", //配置需要打包的入口文件
    output: {
        path:path.resolve(__dirname, "./build"),//配置打包好的文件路径
        filename: "index.js"//配置打包后的出口文件名
    }
}

3.1 css资源打包

什么是loader

loader可以用于对模块的源代码进行转换;

我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的

先引入css文件在加载这个模块时, webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能

输入命令下载loader: npm i css-loader -D css-loader只负责解析css文件，不插入到style中，

因此还需要另外一个loader:style-loader

并在webpack.config.js的module中配置注意loader顺序

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

3.2 处理less文件

使用工具 lessc(与webpack没关系)将其转化为普通css

手动转换：终端输入命令 npx lessc ./src/css/style.less（需转换文件） demo.css（转换后文件） webpack自动转换:使用less-loader

  {
           test: /\.less$/,
           use: [
               "style-loader",
               "css-loader",
               "less-loader",
           ]
     }

3.3处理图片资源

方法1：使用loader：file-loader

{
     test: /\.(png|jpg|gif)$/,
     use: {
       loader: "file-loader",
       options: {
         outputPath: "img",//将图片都放在一个img的文件夹中
         name: "[name]_[hass:6].[ext]",//设置图片格式
       },
     },
   }

方法2:url-loader 可以将小的图片转换成base64，减少网络请求的次数（一种优化）

3.4字体文件

我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理方法1 file-loader

     {
    test:/\.(woff2?|eot|ttf)/,
   use:{
       loader:"file-loader",
       options:{
             filename:'font/[name].[hash:6][ext]'
       }
   }
}

方法2 webpack5配置

{
    test:/\.(woff2?|eot|ttf)/,
    type:'asset/resource,
    generator:{
        name:'font/[name].[hash:6][ext]'
    }
}

以上便是常用的编译loader，更多loader使用方法也相同，可以上webpack官网查看

4webpack插件

Loader是用于特定的模块类型进行转换；

Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

4.1 CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：

我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin；需自己手动导入

安装插件：npm install clean-webpack-plugin -D

    const { CleanWebpackPlugin } =require("clean-webpack-plugin")
    plugins: [
    new CleanWebpackPlugin()
]

4.2 HtmlWebpackPlugin

我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。

在进行项目部署的时，必然也是需要有对应的入口文件index.html；

所以我们也需要对index.html进行打包处理；

对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin；

安装插件: npm install html-webpack-plugin -D

使用：

  const {HtmlWebpackPlugin}=require("html-webpack-plugin");
    plugins: [
   new HtmlWebpackPlugin({
          title: 'webpack项目',
          template:'./public/index.html'
      })
    ]

webpack | 青训营笔记