nodejs和webpack基础

编程语言 2023-12-18 04:24:07 阅读次数: 0

一、NodeJS介绍

1. 什么是NodeJS

NodeJS可以让JavaScript脱离浏览器还能执行的平台，并且对JavaScript功能进行了增强，让JavaScript具备后端服务器程序语言（Java、Python等）能力。

2. JavaScript运行环境介绍

能够运行JS代码的平台环境有两种：浏览器、Node
浏览器环境：支持JS核心语法（ES语法）、DOM操作、BOM操作
Node环境：支持JS核心语法（ES语法）、扩展JS功能（可以向后端语言一样编写后端服务器程序）

3. Node安装

3.1 下载Node

官网：http://nodejs.cn/
在这里插入图片描述
点击安装包下载，进入下载页面
在这里插入图片描述

3.2 安装Node

Node的安装十分简单，双击安装包，直接下一步，直到安装完成为止。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

切记切记：安装node的路径不能有中文

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
耐心等待安装完成
在这里插入图片描述

4. 测试node

4.1 打开dos窗口

按下键盘 window + R 键 打开 运行窗口 ，输入 cmd，按回车
在这里插入图片描述
在黑窗口（dos窗口）中输入

# 输入 node -v 或者 node --version
node -v

在这里插入图片描述
看到提示关于Node的版本信息，说明node安装ok。若没有重新装吧

4.2 常用dos命令

cd ： 切换目录
	cd 目录名（文件夹名）  ： 进入下一级目录
	cd ..  ：退到上一级目录
	cd /   ：回到根目录
盘符： 切换盘符	
cls ： 清屏
dir ： 列出当前目录下内容
ctrl + c : 强制结束正在dos窗口运行程序或者命令

二、Node 模块化

1. node环境中运行js

第一步：创建js文件，并编辑js代码

function add(a, b) {
    
    
    return a + b;
}
console.log(add(1, 3));

第二步：打开dos窗口，切换到当前js文件所在目录，运行结束代码

# 输入node ./js文件名
node ./01-demo.js

，
看到编写的js不使用浏览器，依然可以运行

2. 模块化介绍

模块：一个具有特定功能的文件就是一个模块，模块之间可能存在一定的依赖关系，使用模块可以很好的把这些依赖关系整合起来。模块之间可以相互导入和导出。
简单的说：每个js文件都是一个模块，可以在当前的js文件引用其他js文件中的功能。

2.1 模块使用细节

如果当前js文件需要引用别的js文件，必须做到如下步骤：
1、被引用的js文件需要编写对应的导出代码
2、在当前js文件使用对应的导入代码

2.2 导出模块语法

 module.exports = {
    
    
 	// 需要导出内容
 }

# 注意: 
1. 一般可以导出对象
2. 也可以导出别的东西,这个模块导出啥,那么别的地方引入这个模块,就得到啥.

2.3 导入模块语法

let 变量 = require(‘路径’);

# 注意
1. 如果导入的是"自己写的js文件",那么就是写"路径"
2. 如果导入的是"node内置"的模块 或 使用"npm命令安装的"第三方模块 那么就"写模块名"

2.4 导入导出练习

需求：创建2个js，demoA.js 和 demoB.js 文件，将demoA.js 文件导出，并在demoB.js文件中引入

let add = function (a, b) {
    
    
    return a + b;
}
let username = "张无忌";
// 导出当前js中内容
module.exports = {
    
    
    add: add,
    username : username
}

// 导入demoA.js 文件
let moduleA = require("./demoA.js");

// 使用导入的功能
let sum = moduleA.add(1, 3);
console.log(sum);
console.log(moduleA.username);

测试结果：
在这里插入图片描述

三、npm工具

1、什么是npm

  • NPM的全称是Node Package Manager( node的包管理 ).
  • 包: 就是模块, 就是js模块. 如: swiper axios 这些模块 就称为包.
  • 管理: 安装(下载)/更新/删除

当安装完node之后，就自带npm，不用再安装

2、npm常用命令

# 创建 package.json 文件
npm init -y  或  npm init  然后一顿回车操作

# 安装模块[局部安装: 安装到当前目录下的 node_modules 中]
npm i 模块名   // 例如: npm i swiper 默认安装到运行依赖
npm i 模块名 -D  // 例如: npm i webpack -D    安装到开发依赖

# 安装模块 [全局安装: 全局安装是安装到c盘: C:\Users\Administrator\AppData\Roaming\npm]
# 注意:  1. 全局安装都只要安装一次  2. 一般全局安装都会多出一个命令 
npm i 模块名 -g   // 例如:  npm i nodemon -g

# 删除模块
npm remove 模块名  

# 安装模块可以指定版本哦~~~  [ https://www.npmjs.com/ ]
npm i 模块名@版本号    // 例如:  npm i [email protected]

# 扩展命令 [列出模块所有版本]
npm view 模块名 versions  // 例如: npm view swiper versions

# 一次性安装所有依赖模块
npm i

3、package.json 介绍

{
    
    
  "name": "01-npm-demo",    			// 项目名
  "version": "1.0.0",      				// 项目版本
  "description": "",       				// 项目描述信息
  "main": "index.js",     				// 入口文件 
  "scripts": {
    
               				// 调试脚本文件
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",           				// 作者
  "license": "ISC",      				// 协议 
  "dependencies": {
    
          				// 项目所需的插件依赖包，及项目上线必须要用的插件包等
    "swiper": "^8.1.0"    				// 插件的名称 和对应的版本
  },
  "devDependencies": {
    
             			// 开发需要插件包，上线不需要
    "webpack": "^5.73.0"          		// 插件包和对应版本
  }
}

4、设置淘宝镜像

因为npm的仓库在国外，国内下载比较慢，可以使用阿里云提供的镜像服务，快速下载需要插件包
温馨提示，原淘宝镜像2022年6月30日将停止解析，无法再正常使用，需要更换新的镜像地址

新域名为 npmmirror.com, 相关服务域名切换规则请参考：
http://npm.taobao.org => http://npmmirror.com
http://registry.npm.taobao.org => http://registry.npmmirror.com

# 查看当前下载源
npm config get registry

# 切换下载源
# npm config set registry https://registry.npm.taobao.org  2022年6月30日 停止解析，不能用了
npm config set registry https://registry.npmmirror.com # 最新的国内镜像地址

四、yarn工具

1、yarn介绍

Yarn 是一个由 Facebook 贡献的 Javascript 包管理器。与npm用法基本一致。主要因为npm有段时间不怎么好用，于是Facebook团队设计yarn，完美代替npm。

2、yarn安装

# 全局安装yarn模块 就会得到一个yarn命令  之后就可以使用yarn命令了
npm i yarn -g   // 1.22.10

3、设置淘宝镜像

# 查看当前下载源
yarn config get registry

# 切换下载源
yarn config set registry https://registry.npmmirror.com

4、常用命令

# 创建 package.json 文件
yarn init -y  或  yarn init  然后一顿回车操作

# 安装模块[局部安装: 安装到当前目录下的 node_modules 中]
yarn add 模块名   // 例如: yarn add swiper 默认安装到运行依赖
yarn add 模块名 -D  // 例如: yarn add webpack -D    安装到开发依赖

# 安装模块 [全局安装: 全局安装是安装到c盘: C:\Users\Administrator\AppData\Local\Yarn\bin ]
# 注意:  1. 全局安装都只要安装一次  2. 一般全局安装都会多出一个命令 
yarn global add 模块名   // 例如:  yarn global add nodemon

# 删除模块
yarn remove 模块名  // 删除当前目录下的模块
yarn global remove 模块名  // 删除全局目录下模块

# 安装模块可以指定版本哦~~~  [ https://www.npmjs.com/ ]
yarn add 模块名@版本号    // 例如:  npm i swiper @8.0.0 

# 一次性安装所有依赖模块
yarn

五、配置环境变量

如果使用npm和yarn 全局安装某个模块, 得到一个命令, 想要让window系统能够在任何目录都正常使用此命令,必须给npm和yarn配置环境变量.

  • 默认npm是自动配置了的

  • yarn需要手动配置

C:\Users\Administrator\AppData\Roaming\npm
C:\Users\Administrator\AppData\Local\Yarn\bin

环境变量在哪里?

  • 电脑(计算机)->右键属性->高级系统设置->环境变量->path
  • 把自己的npm和yarn的全局安装路径, 复制粘贴进入即可.

六、webpack

1、webpack介绍

  • 概念: Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

  • webpack工作原理: 给定一个入口js文件, 会顺着这个入口,把所有依赖的文件找到,全部打包,输出一个或多个bundle.
    在这里插入图片描述
    从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

2、webpack的5个核心

  • entry: 入口, 以哪个文件为起点,进行打包.
  • output: 出口, 打包结果,输出到哪里去,叫啥名字
  • loader: 加载器, 把非js文件, 处理成webpack能够打包的模块.
  • plugins: 插件, 复杂任务: 删除/合并/压缩 等待
  • mode: 模式
    • 开发模式 development
    • 生产模式 production

3、webpack打包体验

  1. 创建项目文件夹 & 生成 package.json
yarn init -y
  1. 局部安装两个模块 webpack 和 webpack-cli
yarn add [email protected] [email protected] -D
  1. 创建src文件夹
mkdir src

在src目录下创建：

  • 创建 index.html

  • 创建 js / index.js

function sum(a, b) {
    
    
   	return a + b;
}
console.log(sum(1, 2))
  1. 在项目根目录, 创建一个webpack打包配置文件 webpack.config.js
module.exports = {
    
    
    // 1、入口
    entry:"./src/js/index.js",
    // 2、出口 
    output: {
    
    },    // 没有写出口，会有默认出口，路径为dist ，打包后文件名 main.js
    // 3、加载器
    module: {
    
    },
    // 4、插件
    plugins:[],
    // 5、模式
    mode:"development"
}
  1. 修改 package.json 可执行脚本
  "scripts": {
    
    
    "build":"webpack"
  },
 # 说明:
 1. scripts是可以自己写的, 配置的命令可以运行
 2. 当运行  npm run build  或  yarn build 实际上运行的是后面的命令  webpack
 3. 当运行 webpack命令 会自动找到项目根目录的 webpack.config.js 读取配置 根据配置打包

在这里插入图片描述
6. 执行打包命令

yarn build 或 npm run build

注意：如果没有配置webpack打包出口地址和文件名，默认在dist目录，打包后的文件名是：main.js
可以直接在html文件中引入对应的js测试

七、 loader加载器体验

webpack本身只能处理js文件,需要loader把非js文件,转换为webpack能够打包的模块

yarn安装loader语法规则：
yarn add xx-loader -D # 下载loader

1、loader使用步骤

# 添加css的加载器
# css-loader ： 专门用于处理css的，将css打包后，也放在js文件中
#  style-loader ： 将css插入到页面head标签中
yarn add [email protected] [email protected] -D

2、在src目录下创建css文件，并编写css文件

.box{
    
    
    width: 150px;
    height: 150px;
    background-color: #fa0;
}

3、在index.js文件中导入css文件

虽然在js文件中不用css文件，但是index.js文件是打包入口，不引入，webpack打包的时候，就不会打包css文件，也就必须让webpack能够找到css文件，并打包。

// 引入css文件
require("../css/index.css");


function sum(a, b) {
    
    
    return a + b;
}
console.log(sum(1, 2))

在这里插入图片描述

4、在webpack.config.js添加css加载器配置

    // 3、加载器
    module: {
    
    
        // 配置加载器的解析规则
        rules: [
            {
    
    
                // 需要解析哪些文件，需要使用正则表达式
                test: /\.css$/,
                // 配置需要使用的加载器
                use:['style-loader','css-loader']
            },
        ]
    },

在这里插入图片描述

5、在index.html文件中添加div

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>webpack打包体验</h1>
    <div class="box">css打包体验</div>
    
    <script src="../dist/main.js"></script>
</body>

</html>

6、打包测试

yarn build

查阅网页的效果
在这里插入图片描述

八、less加载器

1、什么是less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

2、less演示

创建html文件，在其中任意编写部分html代码，最重要是使用less语法对页面进行样式设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>webpack入门</h1> 
    <div class="box">
        <a href="#">less的学习</a>
    </div>   
    <script src="../dist/js/main.js"></script>
</body>

</html>

创建一个新的文件样式文件，扩展名为.less，在其中书写less代码

// 定义变量
@bgc: #ccc;
@fc: #fa0;
@afc: #0a0;

.box {
    
    
    width: 300px;
    height: 200px;
    // 引用定义的变量
    background-color: @bgc;

    // 嵌套使用选择器，相当于后代选择器
    a {
    
    
        color: @fc;
        font-size: 20px;

        // 设置鼠标移入效果
        &:hover {
    
    
            color: @afc;
        }
    }
}

3、less加载器

由于less格式的文件，浏览器无法直接识别，因此需要使用加载器或者给VSCode安装less插件，将less格式代码翻译成css格式代码，这里演示使用加载器直接处理less格式文件。

1、下载less加载器

yarn add [email protected] -D		//解析.less文件，编译成 .css文件
yarn add [email protected] -D  //将.less模块打包成css模块

2、配置加载器

    // 3、加载器
    module: {
    
    
        rules: [
            // css 加载器
            {
    
     test: /\.css$/, use: ["style-loader", "css-loader"] },
            // less 加载器
            {
    
     test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
        ]
    },

在这里插入图片描述

3、打包

yarn build

4、在html页面中引入打包的js文件，查看结果
在这里插入图片描述在这里插入图片描述

九、图片资源打包

页面上使用图片有三种情况：
1、css代码中引入图片
2、html页面引用图片
3、js代码中引用图片

1、打包css中图片

1、需要使用到 url-loader加载器，用来加载指定路径的资源

yarn add [email protected] -D    // 用于加载指定路径中的文件资源
yarn add [email protected] -D     // 用于处理加载的文件（可以是任意文件哦，图片也是文件）

2、需要在css代码中编写使用图片css代码（比如背景图）,从百度随便找几张图

// 演示打包css中图片
@w1: 120px;
@w2: 300px;
@w3: 500px;

.box1 {
    
    
    width: @w1;
    height: @w1;
    background-image: url(../imgs/1.webp);
    background-repeat: no-repeat;
    background-size: @w1 @w1;
}

.box2 {
    
    
    width: @w2;
    height: @w2;
    background-image: url(../imgs/2.webp);
    background-repeat: no-repeat;
    background-size: @w2 @w2;
}

.box3 {
    
    
    width: @w3;
    height: @w3;
    background-image: url(../imgs/3.webp);
    background-repeat: no-repeat;
    background-size: @w3 @w3;
}

3、配置css图片加载器（配置有点繁琐哦，注意细节）

    // 加载器
    module: {
    
    
        rules: [
            // css加载器
            {
    
     test: /\.css$/, use: ["style-loader", "css-loader"] },
            // less加载器
            {
    
     test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
            // 配置css中图片加载器
            {
    
    
                test: /\.(jpg|jpeg|webp|gif|svg|png)$/,
                use:{
    
    
                    loader:"url-loader",
                    options:{
    
    
                        // 设置8kb以下的文件打包成代码，10kb以上的打包成文件
                        limit:8*1024,
                        // 生成文件时的名称和扩展名
                        name:"[hash:16].[ext]",
                        //设置输出文件的路径
                        outputPath:"imgs"
                    }
                }
            },
        ]
    }

在这里插入图片描述

如果使用最新版的webpack处理，需要与options并列添加如下代码，否则无法正常打包
type:‘javascript/auto’ // 早期版本不用添加，最新版本必须添加，否则打包后看不到图片内容`
4、html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>webpack入门</h1> 
    <div class="box">
        <a href="#">less的学习</a>
    </div>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
    <script src="../dist/main.js"></script>
</body>
</html>

2、html图片加载器（html文件打包）

打包html页面图片，其实就是连同html页面一起使用webpack打包处理。

1、下载加载器和插件，打包html文件是需要插件来完成的

yarn add [email protected] -D  //html文件加载器
yarn add [email protected] -D  //html解析插件

2、编写webpack的配置文件

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    
    
    // 1、入口
    entry:"./src/js/index.js",
    // 2、出口 
    output: {
    
    },    // 没有写出口，会有默认出口，路径为dist ，打包后文件名 main.js
    // 3、加载器
    module: {
    
    
        rules:[
            // 配置css加载器
            {
    
    test:/\.css$/,use:["style-loader","css-loader"]},
            // 配置less加载器
            {
    
    test:/\.less$/,use:["style-loader","css-loader","less-loader"]},
            // 配置css中图片加载器
            {
    
    
                test: /\.(jpg|jpeg|webp|gif|svg|png)$/,
                use:{
    
    
                    loader:"url-loader",
                    options:{
    
    
                        // 设置8kb以下的文件打包成代码，10kb以上的打包成文件
                        limit:8*1024,
                        // 生成文件时的名称和扩展名
                        name:"[hash:16].[ext]",
                        //设置输出文件的路径
                        outputPath:"imgs"
                    }
                }
            },
            // html
            {
    
    test:/\.html$/,use:["html-loader"]}

            
        ]
    },
    // 4、插件
    plugins:[
        new HtmlWebpackPlugin({
    
    
            template:"./src/index.html",
            filename:"index.html"
        })
    ],
    // 5、模式
    mode:"development"
}

3、在html页面中使用img引入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>webpack入门</h1> 
    <div class="box">
        <a href="#">less的学习</a>
    </div>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <img src="./imgs/1.webp" alt="">
    
    <script src="../dist/main.js"></script>
</body>
</html>

4、打包测试

yarn build

在这里插入图片描述
错误解决方案：需要在webpack.config.js文件的出口配置中配置publicPath

    // 出口
    output: {
    
    
        // 公共的文件输出路径
        publicPath: "./",
        filename: "js/[name].js",
    },

此处有坑：在进行打包的时候会报错
在这里插入图片描述
错误原因：是因为在前面测试的时候，手动在html文件中引入打包后的js文件。
在这里插入图片描述
需要将html引入的js文件的代码删除，然后重新打包
在这里插入图片描述

3、JavaScript中的图片资源加载

js中的图片资源加载打包不需要使用额外的加载器和插件，直接打包即可
需要注意事项：
在js中使用的图片，需要使用require引入

// 引入css文件
require("../css/index.css");
require("../css/index.less");


function sum(a, b) {
    
    
    return a + b;
}
console.log(sum(1, 2))


// 演示js中中使用图片，并使用webpack打包
// 创建img标签，并添加到页面上
let img = document.createElement("img");
// 给img标签设置图片路径,这里必须使用require引入图片路径
img.src = require("../imgs/2.webp");
// 将图片添加到页面上
document.body.appendChild(img);

在这里插入图片描述

在webpack.config.js文件中加载器需要禁用es6的模块化配置

 esModule:false, //禁用es6的模块化

在这里插入图片描述

打包测试

十、字体图标加载器

1、从阿里矢量图下载字体图标文件，直接到www.iconfont.cn 官网下载字体图标
2、需要使用file-loader加载器，在之前已经下载配置过了，这里不用再配置
3、webpack.config.js文件中配置

            // 加载iconfont字体图标
            {
    
    
                test: /\.(ttf|woff|woff2|eot|svg)$/i, use: [{
    
    
                    loader: 'file-loader',
                    options: {
    
    
                        name: '[hash:16].[ext]', //设置字体图标文件的文件名
                        outputPath: 'fonts', //设置字体图标文件的打包文件夹
                    }
                }]
            }

4、在index.js文件中引入iconfont.css文件
在这里插入图片描述

5、在页面上使用字体图标
在这里插入图片描述
6、打包测试

十一、插件使用

1、html打包插件

前面讲解页面图片打包时已经讲过，这里不再重复

2、css提取插件

1、下载插件

yarn add [email protected] -D

2、配置webpack.config.js

// 需要再webpack.config.js文件中引入  mini-css-extract-plugin
// 引入提取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 配置插件
plugins: [
    //提取css文件的插件
    new MiniCssExtractPlugin({
    
    
        filename: 'css/[name].css',
    }),
],
// 修改css和less的加载器
    // 加载器
    module: {
    
    
        // 加载器的规则
        rules: [
            // css加载器
            {
    
    
                test: /\.css$/, use: [{
    
    
                    loader: MiniCssExtractPlugin.loader,
                    options: {
    
    
                        publicPath: "../"
                    }
                }, "css-loader"]
            },
            // less加载器
            {
    
    
                test: /\.less$/, use: [{
    
    
                    loader: MiniCssExtractPlugin.loader,
                    options: {
    
    
                        publicPath: "../"
                    }
                }, "css-loader", "less-loader"]
            }
    },

3、css优化插件

1、下载插件

yarn add [email protected] -D

2、webpack.config.js中配置

//引入 优先css的插件
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');

plugins:[
    //优化css的插件
    new OptimizeCssAssetsWebpackPlugin(),
],

十二、开发服务器

1、配置开发服务器

1、下载

yarn add [email protected] -D

2、webpack.config.js中配置

    //开发服务器
    devServer: {
    
    
        static: __dirname + '/dist/',
        compress: true, // 启动gzip
        port: 8080,  // 端口
        open: true, // 自动打开服务
        hot: true,
    },
    target: 'web', // 目标是浏览器

3、在package.json中配置

  "scripts": {
    
    
    "build": "webpack",
    "serve": "webpack serve"
  },

4、启动服务器

yarn serve

启动服务器后，会自动打开浏览器，并访问指定的页面

2、开发环境和生产环境

1、下载cross-env

yarn add [email protected] -D

2、配置package.json

"scripts": {
    
    
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve"
},

3、webpack.config.js中配置

//模式，生产环境或开发环境由命令来决定
mode: process.env.NODE_ENV,

十三、完整配置

1、webpack完整配置

// 引入html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入提取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//引入 优先css的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    
    
    // 1、入口
    entry:"./src/js/index.js",
    // 2、出口 
    output: {
    
      // 没有写出口，会有默认出口，路径为dist ，打包后文件名 main.js
        publicPath:"",  // 默认就是当前目录，只是在打包html文件的时候，必须写上
        filename:"./js/[name].js"
    },    
    // 3、加载器
    module: {
    
    
        rules:[
            // 配置css加载器
            {
    
    test:/\.css$/,use:[{
    
    
                loader:MiniCssExtractPlugin.loader,
                options:{
    
    
                    publicPath:"../"
                }
            },"css-loader"]},
            // 配置less加载器
            {
    
    test:/\.less$/,use:[{
    
    
                loader:MiniCssExtractPlugin.loader,
                options:{
    
    
                    publicPath:"../"
                }
            },"css-loader","less-loader"]},
            // 配置css中图片加载器
            {
    
    
                test: /\.(jpg|jpeg|webp|gif|svg|png)$/,
                use:{
    
    
                    loader:"url-loader",
                    options:{
    
    
                        // 设置8kb以下的文件打包成代码，10kb以上的打包成文件
                        limit:8*1024,
                        // 生成文件时的名称和扩展名
                        name:"[hash:16].[ext]",
                        //设置输出文件的路径
                        outputPath:"imgs",
                        esModule:false, //禁用es6的模块化
                    }
                }
            },
            // html 加载器
            {
    
    test:/\.html$/,use:["html-loader"]},
            // 加载iconfont字体图标
            {
    
    
                test: /\.(ttf|woff|woff2|eot|svg)$/, use: [{
    
    
                    loader: 'file-loader',
                    options: {
    
    
                        name: '[hash:16].[ext]', //设置字体图标文件的文件名
                        outputPath: 'fonts', //设置字体图标文件的打包文件夹
                    }
                }]
            }

            
        ]
    },
    // 4、插件
    plugins:[
        // 打包html的插件
        new HtmlWebpackPlugin({
    
    
            template:"./src/index.html",
            filename:"index.html"
        }),
        // 打包css插件
        new MiniCssExtractPlugin({
    
    
            filename: 'css/[name].css',
        }),
        // 优化css的插件
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    // 5、模式
    mode: process.env.NODE_ENV,
    devServer: {
    
    
        static: __dirname + '/dist/',
        compress: true, // 启动gzip
        port: 8080,  // 端口
        open: true, // 自动打开服务
        hot: true,
    },
    target: 'web', // 目标是浏览器
}

2、package.json配置

{
    
    
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    
    
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve"
},
  "devDependencies": {
    
    
    "cross-env": "7.0.3",
    "css-loader": "5.0.1",
    "file-loader": "6.2.0",
    "html-loader": "1.3.2",
    "html-webpack-plugin": "4.5.0",
    "less": "3.12.2",
    "less-loader": "7.1.0",
    "mini-css-extract-plugin": "2.4.2",
    "optimize-css-assets-webpack-plugin": "6.0.1",
    "style-loader": "2.0.0",
    "url-loader": "4.1.1",
    "webpack": "5.12.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.9.1"
  }
}

猜你喜欢

转载自blog.csdn.net/baozi7263/article/details/125422890
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022