• webpack快速入门

    目录

    1.概述

    1.1.什么是webpack

    1.2.loader

    2.项目搭建

    3.打包js：

    4.打包CSS

    5.打包图片

    6.插件

    1.概述

    1.1.什么是webpack

    webpack是一个打包工具，其作用是对整个项目中的js、image、css进行打包。

    传统的前端项目引用的第三方js或者css的时候会存在两个很明显的问题：

    1. 引入依赖的所有代码
    2. 命名冲突

    1.引入所有依赖：

    HTML页面中通过标签引入的依赖，浏览器在解析的时候要读取整个js才能完成正确的解析。

    2.命名冲突：

    在index.js中可能存在：

    var a=1;

    在home.js中也可能会存在：

    var a=2;

    node.js出现后允许通过require将依赖模块化的引入。

    npm install someLib

    require("someLib")

    node.js和浏览器能解析的原生js语法是一样的，所以前端开始在node.js环境下进行开发，最后由打包工具打包成浏览器中可以正常允运行的页面。webpack就是这个打包工具。

    1.2.loader

    webpack是用loader来完成对静态资源的打包处理的，静态资源也就是指CSS、js、图片等资源。每一类静态资源都有对应的loader来进行处理。

    Webpack 的 Loader 可以被看作是一种文件处理逻辑和规则的封装。每个 Loader 负责特定类型文件的处理，它们将源文件转换为模块，这些模块最终会被合并到打包后的文件中。

    2.项目搭建

    npm init -y
    npm add webpack webpack-cli

    3.打包js：

    webpack提供了 import和export的方式去对js进行模块儿化的发布和引入。

    同级目录下新建三个文件。

    function.js:

    1. export function getBlogPosts(){
    2.     return 'hello world'
    3. }
    4.  
    5. export function getBlogGets(){
    6.     return 'hello world'
    7. }

    index.js:

    1. import { getBlogPosts } from "./function";
    2.  
    3. console.log(getBlogPosts());

    index.html:

    由于打包出来的结果是js，为了方便展示打包出来的js，在html上引入打包出来的结果，便于观察。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script src="../main/main.js">script>
    10. body>
    11. html>

    使用webpack打包：

    npx webpack

    打包出来的dist目录下会生成main.js，里面是webpack解析出来的依赖：

    webpack只打包了用到的模块.

    webpack当然也有配置文件，在配置文件中可以对webpack的打包全流程进行配置化的管理。webpack会去读取项目下面的webpack.config.js文件(和package.json在一级目录上)，根据文件中的配置来定制化的完成打包。以下是一个基础配置示例：

    1. //引入path依赖，用来下面path寻找路径
    2. const path=require("path");
    3. module.exports={
    4. 	//用开发者模式来打包
    5. 	mode："development",
    6. 	//入口js，js有很多，以那个作为根节点来进行依赖的梳理？
    7. 	entry:"./index.js",
    8. 	//打包结果
    9. 	output:{
    10. 		//打包成什么？
    11. 		filename:"dist.js",
    12. 		//路径是什么？
    13. 		path:path.resolve
    14. 	}
    15. }

    4.打包CSS

    直接在html中引入css由于没有用到js，所以无法用到webpack的特性，在js中倒入css才能用到webpack的特性。

    1. import "./style.css";
    2. import vueimage from "./asserts/images/vue.png"
    3. const blogs=['博客1','博客2','博客3'];
    4.  
    5. const ul=document.createElement("ul");
    6. blogs.forEach((blog) => {
    7.     const li =document.createElement("li");
    8.     li.innerHTML=blog;
    9.     ul.appendChild(li);
    10. });
    11.  
    12. document.body.appendChild(ul);
    13. const image =document.createElement("img");
    14. image.src=vueimage;
    15. document.body.prepend(image);

    打包css需要loader：

    npm add --dev style-loader css-loader

    webpack.config.js配置：

    1. //引入path依赖，用来下面path寻找路径
    2. const path=require("path");
    3. module.exports={
    4. 	//用开发者模式来打包
    5. 	mode:"development",
    6. 	//入口js，js有很多，以那个作为根节点来进行依赖的梳理？
    7. 	entry:"./src/index.js",
    8. 	//打包结果
    9. 	output:{
    10. 		//打包成什么？
    11. 		filename:"dist.js",
    12. 		//路径是什么？
    13. 		path:path.resolve(__dirname,"dist"),
    14. 	},
    15.     //引入css的loader用来支持对css的的打包
    16.     module:{
    17.         rules:[
    18.             {
    19.                 test:/\.css$/i,
    20.                 use:['style-loader','css-loader']
    21.             },
    22.         ],
    23.     }
    24. }

    在js中引用即可：

    5.打包图片

    webpack内置有image的loader，也就是说要webpack打包image的时候不必安装额外的loader，在webpack.config.js配置一下即可。

    1. //引入path依赖，用来下面path寻找路径
    2. const path=require("path");
    3. module.exports={
    4. 	//用开发者模式来打包
    5. 	mode:"development",
    6. 	//入口js，js有很多，以那个作为根节点来进行依赖的梳理？
    7. 	entry:"./src/index.js",
    8. 	//打包结果
    9. 	output:{
    10. 		//打包成什么？
    11. 		filename:"dist.js",
    12. 		//路径是什么？
    13. 		path:path.resolve(__dirname,"dist"),
    14. 	},
    15.     module:{
    16.         rules:[
    17. 			//配置css的loader用来支持对css的的打包
    18.             {
    19.                 test:/\.css$/i,
    20.                 use:['style-loader','css-loader']
    21.             }
    22. 			//配置image的loader用来支持对image的打包
    23. 			,{
    24. 				test:/\.(png|svg|jpg|jpeg|gif)$/i,
    25. 				type:"asset/resource"
    26. 			}
    27.         ],
    28.     }
    29. }

    在js中引入image：

    效果：

    6.插件

    Webpack原生只支持对CSS、js、图片等静态资源的打包，Webpack 插件（Plugins）是用来扩展 Webpack 功能的一种方式。它们可以执行范围更广的任务，包括打包优化、资源管理、注入环境变量等。插件的使用可以在 Webpack 打包的不同阶段执行自定义操作，从而实现更灵活和强大的构建过程。

    举个例子比如原生webpack是不支持对HTML的打包的，想要扩展对HTML的打包可以通过插件来实现。

    1. const HtmlWebpackPlugin = require('html-webpack-plugin');
    2.  
    3. module.exports = {
    4.   // 其他配置...
    5.   plugins: [
    6.     new HtmlWebpackPlugin({
    7.       template: 'src/index.html',
    8.     }),
    9.   ],
    10. };

    具体要用到哪些插件的时候可以去搜索：

    你可以在 npm 官方网站 的搜索框中键入 "webpack plugin" 或者 "webpack loader" 来查找 Webpack 插件和 Loader。NPM 官网是 JavaScript 生态系统中广泛使用的包管理工具，你可以在这里找到几乎所有的 JavaScript 包，包括 Webpack 插件和 Loader。

  • 相关阅读:
    【python】（十七）python常用第三方库——yaml
    Jtti：linux如何判断CPU是几核几线程
    《程序员职场工具库》如何优化你的工作 —— PDCA 循环
    SQL 专项笔记
    Python 的字符串格式化指南
    2022-8-24 华为秋招笔试
    Mac打开应用提示已损坏怎么办
    Ubuntu20 开机输入密码循环登录进入不了桌面
    第十二章 信号（二）- 生产者消费者示例
    RocketMQ 如何保证消息不丢失，如何保证消息不被重复消费
  • 原文地址：https://blog.csdn.net/Joker_ZJN/article/details/133903335