• webpack 的基本使用（详解）

    前言：

    你是否也是只会运用框架中集成好的Webpack配置呢？你明白每一项的意义么？你懂多少Webpack的个性化配置项呢？本篇文章为你讲解Webpack中的各种配置项参数及作用！

    目录

    一，什么是Webpack？

    1. Webpack是一个模块打包器(bundler)。 在Webpack看来,
    2. 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
    3. 它将根据模块的依赖关系进行静态分析，生成对应的静态资源

    从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

    在这里插入图片描述

    二、Webpack安装

    1、全局安装

    npm install -g webpack webpack-cli

    • 1

    2、安装后查看版本号

    webpack -v

    • 1

    三、初始化项目

    1、创建webpack文件夹

    进入webpack目录，执行命令

    npm init -y

    • 1

    2、创建src文件夹

    在这里插入图片描述

    3、src下创建common.js

    exports.info = function (str) {
    document.write(str);
}


    • 1
    • 2
    • 3
    • 4

    4、src下创建utils.js

    exports.add = function (a, b) {
    return a + b;
}

    • 1
    • 2
    • 3

    5、src下创建main.js

    const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

    • 1
    • 2
    • 3

    四、打包文件

    1，js打包

    1、webpack目录下创建配置文件webpack.config.js

    以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

    const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
   path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2、命令行执行编译命令

    webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

    • 1
    • 2
    • 3

    也可以配置项目的npm运行命令，修改package.json文件

    "scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

    • 1
    • 2
    • 3
    • 4

    运行npm命令执行打包

    npm run dev

    • 1

    3、webpack目录下创建index.html

    引用bundle.js

    <body>
    <script src="dist/bundle.js"></script>
</body>

    • 1
    • 2
    • 3

    4、浏览器中查看index.html

    在这里插入图片描述

    2、CSS打包

    1、安装style-loader和 css-loader

    1，Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

    2，Loader 可以理解为是模块和资源的转换器。

    3，首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

    npm i css-loader style-loader -D

    • 1

    2、修改webpack.config.js

    const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3、在src文件夹创建style.css

    .active{
	color:#f70;
	font-weight: 900;
	margin: 10px;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    4、修改main.js

    在第一行引入style.css

    require('./style.css');

    • 1

    5、浏览器中查看index.html

    在这里插入图片描述

    3，打包html中图片资源

    概述：

    html中的图片url-loader没法处理，它只能处理js中引入的图片 /
    样式中图片，不能处理html中img标签，需要引入其他html-loader处理。

    1，添加图片

    在src/index.html添加两个img标签

    2，安装loader

    npm install html-loader --save-dev 

    • 1

    3，配置loader

     use:[{
		loader:"url-loader",  //使用url加载器
		 options:{limit:5000,name:'images/[hash].[ext]'},
		 // 选项,当图片小于5000字节时候，转换base64（小图片减少一次http请求）
		// 文件命名 images文件夹，hash值（计算出图片的名称） ext 后缀名
	}]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    4，打包运行

    在这里插入图片描述

    4，打包iconfont 字体图标

    1，首先需要安装url-loader

    bootstrap4.x之后，boostrap的css里删除了图标 分开了 我们在引入一个 下载：npm i bootstrap@4.1.3
    -D 由于4.x版本icon文件分离出去所以还需要下载open-iconic：

    sudo cnpm i https://github.com/iconic/open-iconic.git -D

    • 1

    2，相关配置如下

    {
   test:/\.(png|woff|woff2|svg|ttf|eot)$/,
   use:{
        loader:'url-loader',
        options: {
            limit: 100000,  //这里要足够大这样所有的字体图标都会打包到css中
        }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    上文中的limit一定要保证大于最大字体文件的大小，因为这个参数是告诉url-loader，如果文件小于这个参数，那么就以Data Url的方式直接构建到文件中。使用这种方式最方便，不用打包后路径的问题，但是缺点就是构建出来的文件特别大，如果线上不要使用这种方式打包。

    3，安装file-loader

    npm install --save-dev file-loader

    • 1

    4，配置相关的文件

    {
   test: /\.(woff|woff2|svg|ttf|eot)$/,
   use:[
        {loader:'file-loader',options:{name:'fonts/[name].[hash:8].[ext]'}}//项目设置打包到dist下的fonts文件夹下
     ]
 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    5，发现出现错误，字体文件加载错误

    最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误：在 webpack.base.conf.js文件中删除

    在这里插入图片描述

    删除以下代码

    {
        test: /\.(woff|woff2|svg|ttf|eot)$/,     
        use: [
          { loader: 'file-loader', options: { name: 'fonts/[name].[hash:8].[ext]' } }//项目设置打包到dist下的fonts文件夹下
        ]
      }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    6，运行程序 / 查看效果！

    npm run build

    • 1

    在这里插入图片描述

    五，loader的使用

    1、什么是loader

    1. loader是webpack中一个非常核心的概念
    2. 现在我们来思考一下webpack用来做什么？
    3. 我们主要使用webpack来处理js代码，并且webpack会自动处理js之前相关的依赖
    4. 但，在开发中不仅由基本的js代码处理，也需要加载css、图片、也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等。
    5. 对于webpack本身的能力来说，对于这些转化是不支持的
    6. 此时给webpack扩展对应的loader就可以了

    2、loader使用过程

    1、css文件处理

    准备工作：
    1、在src目录中，创建一个css文件，其中创建一个normal.css文件
    2、重新组织文件的目录结构，将零散的js文件放在一个js文件夹中
    3、normal.css中的代码非常简单，就是将body设置为red

    在这里插入图片描述

    在这里插入图片描述

    4、但是此时normal.css中的样式还不会生效，因为没有引用它，webpack也找不到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。
    5、此时我们必须在main.js即入口文件引用

    在这里插入图片描述

    之后我们需要导入对应的loader进行使用！

    步骤一：通过npm安装需要使用的loader

    (npm install --save-dev css-loader ）（npm install --save-dev style-loader）
    在webpack的官方中，找到如下关于样式的loader使用方法：
    在这里插入图片描述

    在这里插入图片描述
    步骤二：在webpack.config.js中的modules关键字下进行配置

    说明： 其中css-loader只负责加载css文件，并不负责将css具体样式嵌入到文档中
    此时，我们还需要一个style-loader帮助我们处理

    在这里插入图片描述

    注意：style-loader需要放在css-loader的前面。

    2、less文件处理

    步骤1：

    安装对应的loader（注意：这里还安装了less，因为webpack会使用less对less文件进行编译）。命令：npm install
    –save-dev less-loader less

    步骤2：

    修改对应的配置文件（在webpack.config.js）中添加一个rules选项，用于处理.less文件。如下：

    在这里插入图片描述

    3、图片文件处理

    步骤1：

    在项目中加入两张图片（一张小于8kb，另一张大于8kb）

    步骤2：

    先考虑在css样式中引用图片，如下，让一下

    在这里插入图片描述

    步骤3：

    修改对应的配置文件（在webpack.config.js）中添加一个rules选项，用于处理图片文件。如下：

    在这里插入图片描述

    六、webpack中配置Vue

    不要vue脚手架如何搭建项目？

    1，安装

    npm i vue -S

    • 1

    npm i
    vue-loader ————处理.vue

    vue-template-compiler————编译vue目录

    vue-hot-reload-api ————热更新`

    vue-style-loader ————处理vue 样式

    -D

    2，配置

    01 导入

    const {VueLoaderPlugin}  =  require("vue-loader")

    • 1

    02 配置

    {test:/\.vue$/,use:["vue-loader"]}

    • 1

    03 插件

    plugins:[new VueLoaderPlugin()]

    • 1

    2，js

    模板文件 public/main.html

    <div id="app"></div>

    • 1

    main.js

    import { createApp } from 'vue';
// 导入App.vue
import App from './App.vue';
console.log(App);

// 创建App并挂载
createApp(App).mount("#app")

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    App.vue

    <template >
	<div>
		<h1>你好Vue3</h1>		 
	</div>
</template >

    • 1
    • 2
    • 3
    • 4
    • 5

    七，哈希命名

    1， 可以控制浏览器的缓存

    当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
    当文件名保持不变，浏览器二次请求会从缓存里面去请求内容

    2， 提供二次加载的速度（有效的控制缓存）

    contenthash
    内容发生变化 contenthash值才发送变化
    chunkhash
    发生变化，当前的文件chunkhashhash会变化
    hash
    只要项目内容发送变化，hash就会变化

    八、plugin的使用

    1、认识plugin

    plugin是什么？

    1、plugin是插件的意思，通常是用于对某个现有的架构进行扩展
    2、webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等

    loader和plugin区别

    1、loader主要用于转化某些类型的模块，它是一个转化器
    2、plugin是插件，它是对webpack本身的扩展，是一个扩展器

    plugin的使用过程

    1、步骤一：通过npm安装需要使用plugins（某些webpack已经内置的插件不需要安装）
    2、步骤二：在webpack.config.js中的plugins中配置插件

    2、webpack-添加版权信息Plugin的使用

    在这里插入图片描述

    3、打包html的plugin

    在这里插入图片描述

    4、js压缩的Plugin

    在这里插入图片描述

    九、搭建本地服务器

    1，webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示修改后的结果。

    2，不过它是一个单独的模块，在webpck中使用之前需要安装它

    命令：（npm install --save-dev webpack-dev-server@2.9.1）

    3，devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

    1、contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
    2、port：端口号
    3、inline：页面实时刷新
    4、historyApiFallback：在SPA页面中，依赖HTML5的history模式

    4，webpack.config.js文件配置修改如下：
    在这里插入图片描述
    5，–open参数表示直接打开浏览器
    在这里插入图片描述
    除此之外，
    下面我们想webpack配置文件进行分离：即把开发时需要用的东西和发布（编译）用到的东西分离开。如下：
    在这里插入图片描述

    十、Vue CLI

    1、CLI是什么意思？

    是Command-Line Interface，翻译为命令行界面，但是俗称脚手架
    Vue CLI是一个官方发布vue.js项目脚手架
    使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

    2、Vue CLI使用前提 --Node（需要安装node）

    然而使用Node，必须涉及到npm，
    什么是NPM？

    NPM的全称是Node Package Manager
    是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准
    经常使用NPM来安装一些开发过程中依赖包。

    3、Vue CLI的使用

    安装Vue脚手架

    npm install -g @vue/cli

    • 1

    注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的

    4，Vue CLI2初始化项目

    vue init webpack my-project

    • 1

    在这里插入图片描述

  • 相关阅读:
    HTTPS如何保证数据传输的安全性 以及CA签发证书&验签
    为什么Java中“1000==1000”为false，而”100==100“为true？
    项目七 OpenStack网络管理
    DolpinScheduler
    LeetCode每日一题(488. Zuma Game)
    DAT:Vision Transformer with Deformable Attention详解
    数据结构与算法二：时间/空间复杂度（complexity）
    【计算机网络】UDP协议编写群聊天室----附代码
    Vue3+Vite+Pinia 项目的搭建以及常用方法介绍
    STM32FreeRTOS任务通知(STM32cube高效开发)
  • 原文地址：https://blog.csdn.net/m0_64875238/article/details/127992222