Webpack 简单开荒到高阶操作（含less，sass，热更新，Plugin 进阶版）

AC-Polan

已于 2022-07-12 00:43:01 修改

阅读量499

点赞数 2

分类专栏：笔记文章标签： node.js webpack

于 2019-12-20 08:33:31 首次发布

本文链接：https://blog.csdn.net/qq_37560363/article/details/103626421

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Webpack 简单开荒到高阶操作

一、Webpack前期准备工作

注意：需要提前安装Node.js，安装方法自行百度。

1.新建一个空文件夹

空白文件夹用来跑项目

2.打开cmd或者是将文件拖入HBuilder X（文本编辑器）中打开终端命令窗口

（1）在文件夹中打开cmd方法如下

点击进入项目文件夹，点击文件夹地址栏输入cmd

在项目文件夹中打开cmd

（2）在HBuilder X（文本编辑器）中打开命令窗口，这里文本编辑器可以使用VS code，个人比较喜欢HBuilder X。

先导入项目文件

然后右键打开命令窗口，在使用HBuilder X的时候会有权限不足导致无法使用，把报错复制到浏览器自行百度解决。

打开命令窗口

命令窗口打开如下图所示

成功打开命令窗口

二、Webpack项目简易版

1.项目初始化

（1）环境搭建

命令终端中输入npm init，进行初始化

npm init

项目初始化

遇到如下情况无脑回车

无脑回车...

初始化后项目文件夹下会出现 package.json 文件

package.json文件

接着通过npm安装webpack 和webpack-cli（webpack版本号为4+以后需要安装）

npm install webpack webpack-cli

安装基本webpack

安装完成如下

webpack安装完成

（2）项目基本文件，需要自己手动新建

项目基本文件

index.html中需要填写基本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<ul>
				<li>webpack简易开荒</li>
				<li>webpack简易开荒</li>
				<li>webpack简易开荒</li>
			</ul>
		</div>
	</body>
</html>

HTML基本内容

到了这里Webpack基本环境搭建完成，还有一些需要在项目中一边写一边添加，现在建好的只是一个基本框架。

2.简易版项目正式开始

（1）安装webpack-dev-server,方便后期使用

npm install webpack-dev-server -D

安装webpack-dev-server

(2)配置webpack.config.js

在项目根目录下新建一个名为webpack.config.js的JS文件

新建webpack.config.js

开始配置webpack.config.js

const path = require("path")
module.exports = {
	entry: './src/main.js', //入口
	output: { //出口
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	mode: 'development', //开发模式
	devServer: {
		port: 3000, //设置端口号
		hot: true, //热更新
		contentBase: 'src', //默认打开文件位置
		open: true  //自动打开
	}
}

配置好后在命令中输入npx webpack

npx webpack

这样会把src文件下的main.js的内容复制到dist的bundle.js文件内，bundle.js通过配置好的webpack.config.js配合命令自动新建，如果没有再次执行之前的安装命令或检查package.json是不是有模块未安装。

通过命令自动新建一个bundle.js

运行npm run go，go是在package.json中设置的键，基本的webpack项目就跑起来了。

package.json

"go": "webpack-dev-server"

在这里插入图片描述

开始让项目跑起来

npm run go

项目跑起来了

由于设置了热更新所以跑完命令浏览器会自动打开，如果想再次查看可以在浏览器地址栏输入localhost：3000,这里的3000是之前设置的端口号。

localhost：3000

浏览器页面

三、Webpack项目进阶版

1.webpack中css、less、sass应用

（1）在项目的css文件夹中新建css、less、sass文件

新建css

（2）在终端命令中安装需要的环境

npm install css-loader style-loader  //这个是css需要的
npm install less-loader less  //这个是配置less需要的
npm install node-sass sass-loader //这个是配置sass需要的，sass需要node-sass安装
npm install url-loader //这个是加载图片需要的

配置css、less、sass所需环境

（3）在main.js中引入css、less、sass

import './css/style.css' 
import './css/style.less'
import './css/style.scss'

（4）在webpack.config.js中进行配置，less和sass同理，需要注意的是sass的正则是.scss，use里面是sass-loader

	module:{
		rules:[
			{
				test:/\.css$/,
				use:['style-loader','css-loader']
			},
			{
				test:/\.less$/,
				use:['style-loader','css-loader','less-loader']
			},
			{
				test:/\.scss$/,
				use:['style-loader','css-loader','sass-loader']
			},
			{
				test:/\.(jpg|png|gif|webp)/,
				use:'url-loader?limit=79235&name=[name].ext'
			}
		]
	}

在这里插入图片描述

(5)less,sass语法

less语法:

@font-w:bold; //@font-w 是起名字，：后面是内容
.box{ 
	font-weight: @font-w;
}

sacc

$fonst:20px; //sass语法,$与less中的@意思相同，引用方法也相同
html,body{
	.box{
		font-size: $fonst;
	}
}

（6）在package.json检查文件是否安装完整

检查文件的完整性

（7）在index.html中引入bundle.js文件，否则css样式设置无效！当然还有一种比较麻烦的方法就是使用html-webpack-plugin，这里我把方法写出来供大家参考

npm安装html-webpack-plugin

npm install html-webpack-plugin

配置html-webpack-plugin

const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports = {
plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			filename:'index.html'
		})
	]
}

一定要在package.json检查是否安装完整!!!

现在让我们把项目愉快的跑起来吧！！！npm run go

小提示：如果用了html-webpack-plugin可以把之前在index.html中引入的bundle.js删除掉

完结~

完结！！！分享不易，喜欢就点点关注，有不对的地方请在评论区及时指正。

万分感谢❀~~❀

AC-Polan

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Webpack 简单开荒到高阶操作（含less，sass，热更新，Plugin 进阶版）

配置好后在命令中输入npx webpack这样会把src文件下的main.js的内容复制到dist的bundle.js文件内，bundle.js通过配置好的webpack.config.js配合命令自动新建，如果没有再次执行之前的安装命令或检查package.json是不是有模块未安装。（4）在webpack.config.js中进行配置，less和sass同理，需要注意的是sass的正则是.scss，use里面是sass-loadersacc（6）在package.json检查文
复制链接

扫一扫