webpack项目构建工具的基本使用，再也不能阻止我在码云看前端项目了！！！

最新推荐文章于 2023-11-22 10:03:52 发布

倔强的耗子

最新推荐文章于 2023-11-22 10:03:52 发布

阅读量586

点赞数

分类专栏： java 文章标签： webpack js vue

本文链接：https://blog.csdn.net/weixin_44178366/article/details/110942442

版权

java 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

webpack的基本使用

webpack是那一个流行的前端项目构建工具（打包工具）可以解决当前web开发中所面临的浏览器不兼容js的问题

注意：在使用webpack之前需要提前安装好node.js，这个至关重要啊，中间踩了好多好多大坑，都是版本问题惹的祸。我是win7系统的，所以不能装太高版本的，你们装各自对应的就好

一、webpack初体验

在这里我基于一个简单的的项目使用

新建项目空白目录，并运行 npm init -y 命令，初始化包管理文件 package.json
新建src源代码目录
新建src —> index.html首页
初始化首页基本结构
运行 npm install jquery -S 命令，安装jquery
通过模块化的形式，实现隔行变色

index.html

<!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>

index.js

import $ from 'jquery'

$(function(){
	$('li:odd').css('backgroundColor','pink')
	$('li:even').css('backgroundColor','lightblue')
})

直接运行浏览器发现报错，原因是浏览器不支持ES6的这种语法 import from ，这时需要使用webpack将项目重新打包，将代码重新编译成浏览器能识别的js代码

运行npm install webpack webpack-cli -D命令，安装webpack相关的包
在项目根目录中，创建名为webpack.config.js的webpack配置文件并添加如下配置

module.exports = {
	mode:'development' 
}

在package.json配置文件中添加如下内容

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

在终端中运行 npm run dev命令，启动webpack进行项目打包

命令运行之后发现项目中多了个dist目录，并且下面还多了个main.js文件，然后将main.js重新引入到index.html中

ok，访问首页，没报错，说明webpack打包成功

二、配置打包的入口与出口

webpack的4.x版本中默认规定：

打包的入口文件为src --> index.js
打包的输出文件为dist–> main.js

如果需要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息

const path = require('path')

module.exports = {
	mode:'development',   /* __dirname表示当前文件所在的目录*/
	entry:path.join(__dirname,'./src/index.js'), //打包入口
	output:{
		path:path.join(__dirname,'./dist'),//输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	}
}

ok ，在index.html引入bundle.js即可，访问成功

三、配置webpack的自动打包功能

为什么需要配置自动打包功能呢？我们来想象这样换一个场景，就是现在我们项目已经打包成功了，但是呢需求发生了变化，这个时候我们修改了代码，但是访问页面代码并没有生效，而是需要重新打包才能生效。所以这个时候我们就很有必要配置一下自动打包功能

运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具
修改package.json—>scripts中的dev命令如下：

"scripts":{
    "dev":"webpack-dev-server" //script节点下的脚本，可以通过npm run执行
}

将src-------> index.html中，script脚本的引用路径，修改为“/bundle.js”
运行 npm run dev 命令，重新进行打包
在浏览器中访问 http://localhost:8080地址，查看自动打包效果

发现只要一保存，页面里面就会发生变化

注意

webpack-dev-server会启动一个实时打包的http服务器
webpack-dev-server 打包生成的输出文件，默认放到了项目的根目录中，而且是虚拟的看不见的

四、配置html-webpack-plugin生成浏览页面

项目一打包，访问http://locaohost:8080就是首页，而不用再点击src

运行 npm install html-webpack-plugin -D命令，安装生成浏览页面的插件
修改webpack.config.js文件头部区域，添加如下配置信息：

//导入生成蓝柳页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
	template:'./src/index.html', //指定要用到的模板文件
	filename:'index.html'// 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

修改webpack.config.js文件向外暴露的配置对象，新增如下配置节点：

plugins:[htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表

webpack.config.js总的文件

const path = require('path')
//导入生成蓝柳页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
	template:'./src/index.html', //指定要用到的模板文件
	filename:'index.html'// 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
	mode:'development',   /* __dirname表示当前文件所在的目录*/
	entry:path.join(__dirname,'./src/index.js'), //打包入口
	output:{
		path:path.join(__dirname,'./dist'),//输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	},
	plugins:[htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表
}

运行后访问地址，直接跳转到首页，配置成功！

五、配置自动打包相关参数

每次项目打包之后需要复制地址才能看到网站效果，现在的需求是项目打包之后自动跳转到首页

添加package.json中的配置

//--open 打包完成后自动打开浏览器页面
//--host 配置ip地址
//--port 配置端口

"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },

六、webpack中的加载器

1、通过loader打包非js模块

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

loader加载器可以协助webpack打包处理特定的文件模块，比如：

less-loader 可以打包处理 .less相关的文件
sass-loader 可以打包处理 .scss相关的文件
url-loader 可以打包处理css中与url路径相关的文件

loader的调用过程

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8jnCasCG-1607523978684)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201208220427776.png)]$

2、webpack中加载器的基本使用

打包处理css文件

运行npm i style-loader css-loader -D命令，安装处理css文件的loader
在webpack.config.js的module -----> rules数组中，添加loader规则如下

//所有第三方文件模块的匹配规则
//test:表示匹配的正则，在这里的意思是以css结尾的
//use:表示对应要调用的loader
module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

1.css

li{
	list-style: none;
}

index.js

import $ from 'jquery'
import './css/1.css' //在js文件中引入css文件，到时候就会调用loader帮忙打包

$(function(){
	$('li:odd').css('backgroundColor','yellow')
	$('li:even').css('backgroundColor','lightblue')
})

运行 npm run dev ，成功将li标签的小圆点去除了

注意

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

打包处理less文件

运行npm i less-loader less -D命令
在webpack.config.js的module----->rules数组中，添加如下规则：

module:{
    rules:[
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

1.less

body{
	margin: 0;
	padding: 0;
	ul{
		padding: 0;
		margin: 0;
	}
}

index.js

import $ from 'jquery'
import './css/1.css'
import './css/1.less' //引入less文件

$(function(){
	$('li:odd').css('backgroundColor','yellow')
	$('li:even').css('backgroundColor','lightblue')
})

npm run dev 运行项目，ok 完美！

打包处理scss文件

运行 npm i sass-loader node-sass -D 命令
在webpack.config.js的module----> rules数组中，添加loader规则如下：

module:{
    rules:[
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

同上

配置postCSS自动添加css的兼容前缀

问题，当我们写好css样式并打包之后，发现项目在谷歌等浏览器是正常的，但是在IE浏览器器是不生效的，具有兼容性的问题，这个时候我们可以配置一下postCSS来解决兼容性的问题

运行 npm i postcss-loader autoprefixer -D命令
在项目中创建postcss的配置文件postcss.config.js，并初始化如下配置

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件
module.exports = {
    plugins:['autoprefixer'] //挂载插件
}

在webpack.config.js的module -----> rules数组中，修改css的loader规则如下：

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
    ]
}

ok，运行npm run dev 问题解决

打包样式表中的图片和字体文件

问题：当我们在index.js文件中引入了图片路径等资源时，发现项目打包错误,发现缺少了相应的加载器

ERROR in ./src/images/bg.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/1.css 4:0-61 6:73-102
 @ ./src/css/1.css 2:12-132 9:17-24 13:15-29
 @ ./src/index.js 2:0-20

运行 npm i url-loader file-loader -D 命令
在webpack.config.js的module —> rules数组中，添加loader规则如下：

module:{
    rules:[
        {
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use:'url-loader?limit=16940' //其中？之后是loader的参数项。
        }
    ]
}
//limit是用来指定图片的大小，单位是字节（byte），只有小于limit大小的图片，才会被转化base64图片

npm run dev ：经测试，好像limit的值有点问题，发现等于图片的实际大小也会被转为base64

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

在index.js中添加如下内容后保存运行 npm run dev

//定义一个js的高级语法
class Person{
	static info ='aaa'
}
console.log(Person.info)

报错如下

Uncaught Error: Module parse failed: Unexpected token (13:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| //定义一个js的高级语法
| class Person{
> 	static info ='aaa'
| }
| console.log(Person.info)

# 总的意思是说缺少加载器打包js高级语法

配置

安装babel转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下：

module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在webpack.config.js的module---->rules数组中，添加loader规则如下：

{test:/\.js$/,use:'babel-loader',exclude:/node-modules/}
//exclude为排除项，表示babel-loader不需要处理node_modules中的js文件

运行 npm run dev ok

3、Vue单文件组件

传统组件的问题和解决方案

全局定义的组件必须保证组件的名称不重复
字符串模板缺乏高亮，在html有多行的时候用到丑陋的 \
不支持css意味着当html和javascript组件化时，css明显被遗漏
没有构建步骤限制，只能使用html和es5javascript,而不能使用预处理器（如：babel）

单文件组件的组成结构

template 组件和模板区域
script 业务逻辑区域
style 样式区域

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LinUTxKa-1607523978687)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201209214500024.png)]$

在src/component目录下创建一个App.vue文件

<template>
	<div>
		<h1>这是App根组件</h1>
	</div>
</template>

<script>
	export default{
		data(){
			return {}
		},
		methods::{}
	};
	
</script>

<!-- scoped防止组件之间的样式冲突 -->
<style scoped> 
	h1{
		color: #FF1493;
	}
</style>

在index.js文件中引入上面的vue文件

//导入vue的单文件组件
import App from './component/App.vue'

配置好之后启动项目，发现报错，没有合适的加载器

webpack中配置vue组件的加载器

运行 npm i vue-loader vue-template-compiler -D 命令
在webpack.config.js配置文件中，添加vue-loader的配置项如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    module:{
        rules:[
            // ... 其他的规则
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    plugins:[
        new VueLoaderPlugin() //请确保引入这个插件
    ]
}

在webpack项目中使用vue

运行 npm i vue -S 安装vue
在src—> index.js入口文件中，通过 import Vue from ‘vue’ 来导入vue构造函数
创建vue的实例对象，来指定要控制的el区域
通过render的函数渲染App组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BEsqbtP-1607523978689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201209220911094.png)]$

index.html

<!-- 将来要被vue控制的区域-->
<div id="app"></div>

配置完之后运行 npm run dev ,ok,发现vue的模板渲染成功！

webpack打包发布

上线前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AEymBjMo-1607523978692)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201209221903316.png)]$