webpack的基本使用

文章介绍了webpack的基本概念、主要功能和使用前的准备,包括初始化项目、安装配置及打包过程。详细讲解了webpack配置文件的创建、自定义打包入口和出口,以及webpack-dev-server和html-webpack-plugin的配置。此外,还涉及CSS、LESS、图片和高级JS语法的打包处理,以及SourceMap的配置。最后提到了在不同模式下打包发布项目的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpack的基本使用(了解即可)

什么是webpack

概念:webpack是前端项目工程化的具体解决方案

主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器端JavaScript的兼容性,性能优化等强大的功能

好处:让程序员把工作的重心放到具体功能的实现上,提高开发效率

webpack使用前的准备

  1. 新建项目空白目录,并运行npm init -y,初始化包管理配置文件package.json
  2. 新建src源代码目录
  3. 新建src->index.html首页和src->index.js脚本文件
  4. 初始化首页基本的结构
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>我是第1 个小li</li>
            <li>我是第2 个小li</li>
            <li>我是第3 个小li</li>
            <li>我是第4 个小li</li>
            <li>我是第5 个小li</li>
            <li>我是第6 个小li</li>
            <li>我是第7 个小li</li>
            <li>我是第8 个小li</li>
            <li>我是第9 个小li</li>
            <li>我是第10 个小li</li>
        </ul>
        <img src="" alt="" class="box1"/>
    </body>
</html>
  1. 运行npm i jquery命令,安装jQuery
  2. 通过ES6模块化的方式导入jQuery,列表隔行变色效果
import $ from 'jquery'

$(function() {
	$('li:odd').css('background-color', 'pink')
	$('li:even').css('background-color', 'red')
})
  1. 安装webpack

npm i webpack webpack-cli -D

webpack的配置文件

在项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置

module.exports = {
    // 开发模式
	mode:'development',// production
}

在package.json的scripts节点下,新增dev脚本如下:

"scripts": {
  "dev": "webpack",
},

在终端中运行npm run dev命令,启动webpack进行项目的打包构建

在webpack的4.x和5.x版本中,有如下默认约定

  1. 默认的打包入口文件为src->index.js
  2. 默认的输出文件路径为dist->main.js

注意:可以在webpack.config.js中修改打包的默认约定

自定义打包的入口和出口

在webpack.config.js文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口

const path = require('path')

module.exports = {
    entry:path.join(__dirname, '/src/index.js'),
    output: {
        path:path.join(__dirname, '/dist'),
        filename:'js/bundle.js'
    },
}

安装配置webpack-dev-server

  1. 运行如下代码npm i webpack-dev-server -D

修改package.json->scripts中的dev命令如下:

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

再次运行npm run dev命令,重新进行项目的打包

在浏览器中访问http://127.0.0.1:8080/地址,查看自动打包效果

注意:webpack-dev-server会启动一个实时打包的http服务器

安装配置html-webpack-plugin

  1. 运行如下命令:npm i html-webpack-plugin -D
  2. 配置html-webpack-plugin:修改webpack.config.js文件如下
const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
	//要复制哪个文件
	template: './src/index.html',
	// 复制在哪里
	filename: './index.html'
})

module.exports = {
    // 开发模式
	mode:'development',
	// 使用
	plugins: [htmlPlugin],
}

devServer节点

在webpack.config.js文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置

module.exports = {
    devServer: {
		open: true,// 初次打包生成完成后,自动打开浏览器
		port: 8080,// 实时打包使用的端口
		host: '127.0.0.1'// 实时打包所使用的地址
	},
}

loader概述

在实际开发过程中,webpack默认只能打包处理以js后缀名结尾的模块,其他类型的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错

loader加载器的作用:协助webpack打包处理特点的模块,比如

  • css-loader:可以打包处理CSS文件
  • less-loader:可以打包处理LESS文件
  • babel-loader:可以打包处理webpack无法处理的高级JavaScript语法

打包处理CSS文件

  1. 运行npm i style-loader css-loader -D命令,安装处理CSS文件的loader
  2. 在webpack.config.js文件中,添加loader规则如下:
module.exports = {
    module: {
        rules: [
            // css加载器
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
        ]
    }
}

其中,test表示要处理的文件类型,use表示对应要调用的loader

use数组中指定的loader顺序是固定的,多个loader的调用顺序是从后往前调用

打包处理LESS文件

  1. 运行npm i less-loader less -D
  2. 在webpack.config.js中,添加loader规则如下:
module.exports = {
    module: {
        rules: [
            // css加载器
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            // less加载器
            {
				test: /\.less$/,
				use: ['style-loader','css-loader','less-loader']
			},
        ]
    }
}

打包处理样式表中与URL路径相关的文件

  1. 运行npm i url-loader file-loader -D命令
  2. 在webpack.config.js文件中,添加loader规则如下:
module.exports = {
    module: {
        rules: [
            // css加载器
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            // less加载器
            {
				test: /\.less$/,
				use: ['style-loader','css-loader','less-loader']
			},
            // 处理图片结尾的文件
			{
				test: /\.jpg|png|gif$/,
				use: {
					loader: 'url-loader',
					options: {
						limit: 200,
						outputPath: 'image',
					}
				}
			},
        ]
    }
}

index.js内容如下:

import $ from 'jquery'
//导入图片 得到图片文件
import logo from '@/image/01.jpg'

// 设置属性值
$(".box1").prop("src",logo)

$(function() {
	$('li:odd').css('background-color', 'pink')
	$('li:even').css('background-color', 'red')
})

打包处理JS文件中的高级语法

webpack只能打包处理一部分高级JavaScript语法,对于那些webpack无法处理的高级js语法,需要借助于babel-loader进行打包处理,例如webpack无法处理下面的JavaScript代码

// 定义一个装饰器
function info(target) {
	target.info = 'Person info'
}

// 定义一个普通的类
@info
class Person {}

// 打印Person的静态属性info
console.log(Person.info)

运行如下的命令安装对应的依赖包

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D

在webpack.config.js文件中,添加loader规则如下:

module.exports = {
    module: {
        rules: [
            // css加载器
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            // less加载器
            {
				test: /\.less$/,
				use: ['style-loader','css-loader','less-loader']
			},
            // 处理图片结尾的文件
			{
				test: /\.jpg|png|gif$/,
				use: {
					loader: 'url-loader',
					options: {
						limit: 200,
						outputPath: 'image',
					}
				}
			},
            {
				test: /\.js$/,
				use: ['babel-loader'],
				exclude: /node_modules/
			}
        ]
    }
}

在项目根目录下,创建名为babel.config.js的配置文件,定义babel的配置项如下

module.exports = {
	// 声明babel可用的插件
	plugins: [['@babel/plugin-proposal-decorators',{legacy: true}]]
}

babel官方文档

配置webpack的打包发布

在package.json文件的scripts节点下,新增build命令如下:

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production",
},

–mode是一个参数项,用来指定webpack的运行模式,production代表生产环境会对打包生成的文件进行代码压缩和性能优化

注意:通过–mode指定的参数项,会覆盖webpack.config.js中的mode选项

自动清理dist目录下的旧文件

为了在每次打包发布时自动清理掉dist目录下的旧文件,可以安装并配置clean-webpack-plugin插件:

安装命令npm i clean-webpack-plugin -D

webpack.config.js文件如下:

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

const cleanPlugin = new CleanWebpackPlugin()

module.exports = {
    plugins: [htmlPlugin, cleanPlugin],
}

Source Map

Source Map就是一个信息文件,里面存储着位置信息,也就是说,Source Map存储着压缩混淆后的代码,所对应转换前的位置

有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,极大方便了我们的调试

配置Source Map

开发环境下,推荐在webpack.config.js文件中添加如下的配置,即可保证运行时错误的行数和源代码的行数保持一致

module.exports = {
    mode:'development',
    // devtool: 'nosources-source-map',// 生产环境下
    devtool: 'eval-source-map',
}

在生产环境下,如果省略了devtool选项,则最终生成的文件中不包含Source Map,这能防止原始代码通过Source Map的形式暴露

实际开发中需要我们自己配置webpack吗?不需要,所以了解即可

webpack.config.js中配置@符号

module.exports = {
    resolve: {
		alias: {
			'@': path.join(__dirname, './src/')
		}
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草莓小子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值