webPack

最新推荐文章于 2023-11-28 10:58:35 发布

原创最新推荐文章于 2023-11-28 10:58:35 发布 · 189 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍Webpack作为前端模块化管理和打包工具的基本概念、特点及使用方法。包括安装配置、loader加载器、plugin插件的使用，以及如何进行代码拆分、转换资源等。

一、模块化

1.什么是模块化

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口。各模块间具有透明性。

2.模块化实现方式

CommonJS
Node.js所遵循的规范：利用require 同步加载node_module中其他模块或者系统模块； export、module.exports导出自定义模块，import或者require引入模块。
这是一种框架，而不是JS原生.
每一个node xx.js都是一个模块。

webPack产生原因

一个大型的系统往往需要将系统分割成许多具有独立功能部分的方法，模块间具有透明性，（相互间可以引用）。例如Common.js：Node.js所遵循的规范，允许通过require方法同步加载其他所要的模块

二、Webpack

1.什么是Webpack

Webpack是前端“模块化管理”和“打包工具‘。将许多松散模块按照依赖和规则打包成符合生产环境部署到前端资源。还可以将按需加载的模块进行代码分离，实际需要时候再异步加载。通过loader可将任何形式的资源都视作模块。
在这里插入图片描述

2.Webpack特点：

代码拆分、Loader转换器将各类资源转换成js、可处理许多第三方模块、多个插件系统、快速运行

3.Webpack使用：

1.安装

npm init -y //初始化package.json
npm install webpack webpack-cli --save-dev// -dev表示为开发模式、cli用于在命令行中运行webpack

2.利用配置文件确定文件入口、出口。
在根目录下初始化一个webpack.config.js

const path=require('path')
module.exports={
    entry:'./src/index.js',  //入口文件
    mode:'development',
    output:{
        filename:`main.js`,  //出口文件
        path:path.resolve( __dirname,'dist') //出口文件路径
}

3.执行

npx webpack

4.loader
4.1css模块加载器
安装：

npm install style-loader css-loader --save-dev //要加载style

修改配置文件：

  module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader'],
                use:'inline-source-map'

            }
        ]
    }

注意：css、style-loader顺序要固定。因为模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。
4.2less加载器
1.下载

npm install style-loader less-loader --save-dev //要加载style

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

4.3图片加载

 {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      }

5.plugin
5.1以html-webpack-plugin为例
安装方式

npm install --save-dev html-webpack-plugin

配置方式：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports  = {
  ...
  plugins: [new HtmlWebpackPlugin()]
};

5.2html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用clean-webpack-plugin : 删除打包文件

4.webPack常见知识点：

1.webpack是用来做什么的：webpack是模块静态打包工具，利用webpack可以将所有模块利用资源模块依赖关系连接起来，转换css、less文件等非js文件成为浏览器可以直接识别运行的js文件。
2.原理：从入口文件通过递归找到直接依赖以及间接以来的模块，并构建出依赖图，
3.热更新原理：只要保存代码，就会对代码重新进行打包，并将改变的代码发布到浏览器端，浏览器用新模块代替旧模块，这是一个局部刷新而非整体刷新的过程。
4.plugin和loader的区别：
loader是在module.rules中进行配置，它是一个数组，每一项为一个对象表明对于什么类型的文件应用什么类型的loader以及参数，所以它更像是一组固定的规则。而plugin在plugins中单独配置的，他就是一个数组。
plugin可以看作是loader的补充，loader是固定的，而plugin更为灵活。
5.webpack作用：打包压缩、编译兼容、基于plugin提高工程化效率以及质量。
6.webpack构建项目的流程
初始化参数->加载插件->确定入口->编译（建立各模块关系）->确定出口->输出