webpack的基本使用

最新推荐文章于 2025-05-28 11:13:19 发布

st紫月

最新推荐文章于 2025-05-28 11:13:19 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序 vue框架文章标签： webpack

本文链接：https://blog.csdn.net/ziyue13/article/details/120792650

vue框架同时被 2 个专栏收录

32 篇文章

订阅专栏

微信小程序

27 篇文章

订阅专栏

本文介绍了使用webpack进行前端开发的详细步骤，包括初始化项目、安装jQuery、实现列表隔行变色、配置webpack、处理CSS和LESS文件、打包高级JS语法、引入Vue组件等。通过这些实践，展示了webpack在构建现代前端应用中的核心作用。

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

一.创建；列表各行变色项目
1.新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
2.新建src源代码目录
3.新建src->index.html首页
4.初始化首页基本的结构
5.运行npm install jquery -S命令，安装jQuery
6.通过模块化的形式，实现列表隔行变色效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</body>
</html>

import $ from 'jquery'

$(function(){
	$('li:odd').css('color','red');
})

运行HTML文件，发现报错无法编译import，因为import属于es6语法，所以需要webpack来转换es6语法
在这里插入图片描述

安装webpack：
1.运行npm install webpack webpack-cli -D命令
2.在项目根目录中，创建名为webpack.config.js的webpack配置文件
3.在webpack的配置文件中，初始化配置
module.exports = {
mode:‘development’//mode用来指定构建模式 production
}
4.在package.json配置文件中的scripts节点下，新增dev脚本如下：
“scripts”:{
“dev”:“webpack”
}
5.使用npm run dev命令，启动webpack进行项目打包
6.webpack会帮我们创建一个dist目录，dist目录当中的main.js为低级的js代码

在这里插入图片描述

在这里插入图片描述
刚刚的代码就能正常执行

webpack配置打包的入口和出口:
默认打包的入口文件为src->index.js，打包的输出文件为dist->main.js文件
如果要修改打包的入口和出口，可以在webpack.config.js新增如下配置信息：

const path = require('path');
module.exports = {
	entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
	output:{
		path:path.join(__dirname,'./dist'),//输出文件的存放路径
		filename:'bundle.js'//输出文件的名称
	}
}

执行npm run dev，打包成功
在这里插入图片描述

D盘多出bundle.js文件

webpack中的加载器：
1.通过loader打包非js模块
在实际开发过程中，webpack默认只能打包处理以.js后缀结尾的模块，其他非.js后缀结尾的模块，webpack处理不了，需要loader加载器才可以正常打包

loader加载器可以协助webpack打包处理特定的文件模块
less-loader可以打包处理.less相关的文件
sass-loader可以打包处理.scss相关的文件
url-loader可以打包处理css中与url路径相关的文件

新建1.css文件，在index.js当中引入，报错，所以需要引入loader
在这里插入图片描述

打包处理css文件
1.运行npm install style-loader css-loader -D命令，安装处理css文件的loader
2.在webpack.config.js的module.rules数组中，添加loader规则如下：
module:{
rules:[
{test:’/.css$/,use:[‘style-loader’,‘css-loader’]}
]
}
test表示匹配的文件类型，use表示要用的loader

使用npm run dev运行代码，效果如下：
在这里插入图片描述

打包处理less文件：
1.运行npm install less-loader less -D命令
2.在webpack.config.js的module.rules数组中，添加loader规则如下：
module:{
rules:[
{test:/.less$/,use:[‘style-loader’,‘css-loader’,‘less-loader’]}
]
}

打包处理scss文件：
1.运行npm install sass-loader node-sass -D
2.在webpack.config.js的module.rules数组中，添加loader规则如下：
module:{
rules:[
{test:/.scss$/,use:[‘style-loader’,‘css-loader’,‘sass-loader’]}
]
}

打包处理高级js语法：
1.npm install babel-loader @babel/core @babel/runtime -D
2.npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中，创建babel配置文件babel.config.js并初始化配置如下：
module.exports = {
presets:[ ‘@babel/preset-env’ ],
plugins:[ ‘@babel/plugin-transform-runtime’,’@babel/plugin-proposal-class-properties’ ]
}
4.在webpack.config.js的module -> rules数组中，添加loader规则如下：
{ test:/.js$/,use:‘babel-loader’,exclude:/node_modules/}

vue单文件组件的使用方法，在src目录下新建components目录
webpack中配置vue组件的加载器：
1.运行npm install vue-loader vue-template-compiler -D
2.在webpack.config.js配置文件中，添加vue-loader的配置项如下：
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
module.exports = {
module:{
rules:[
//…其他规则
{ test:/.vue$/,use:‘vue-loader’}
]
},
plugins:[
//其他插件
new VueLoaderPlugin()
]
}

运行代码成功执行，引入vue单文件组件成功
在这里插入图片描述

在这里插入图片描述

在webpack项目中使用vue：
1.运行npm install vue -S安装vue
2.在src->index.js入口文件中通过import Vue from ‘vue’来导入vue构造函数
3.创建vue的实例对象，并指定要控制的el区域
4.通过render函数渲染App根组件
import Vue from ‘vue’
import App from ‘./components/App.vue’
const vm = new Vue({
el:’#app’,
render:h=>h(App)
})

使用npm run dev执行文件，运行成功
在这里插入图片描述