webpack（3.8.1版本）使用方式实例

最新推荐文章于 2024-06-22 14:20:07 发布

友人C君~

最新推荐文章于 2024-06-22 14:20:07 发布

阅读量753

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/CWH0908/article/details/93320122

版权

webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

初始配置

首先在HBuilder中创建目录文件

然后在“运行”中打开刚才配置好的cmd命令行工具

在cmd命令行中先进入文件目录

使用 npm init -y 命令进行初始化

然后就可以下载你所需要的文件包了，例如使用 npm install vue -S 下载vue.js文件

在HBuilder目录里能看到node_modules文件，如果没有自动更新目录，那就重启HBuilder看看

安装webpack 3.8.1

此时，在局部安装webpack3.3.0版本（高于4.0版本，webpack-cli已分离出去，需要额外安装，且webpack指令语法有变动，新手不推荐使用高版本webpack，先尝试使用webpack3.3.0版本）

~~输入 npm i webpack@3.3.0 安装webpack3.3.0版本~~

见下文

为了之后开发方便，给出一套推荐安装webpack的及其拓展的版本（由于webpack-dev-server只能在项目中安装)

webpack以 npm i webpack@3.8.1 -D 的形式安装到项目下
webpack-cli以 npm i webpack-cli@3.0.0 -D 的形式安装到项目下
webpack-dev-server以 npm i webpack-dev-server@2.9.3 -D 的形式安装到项目下

测试样例

注意：

由于使用webpack的作用就是打包资源文件，减少请求，所以不应在index.html页面中导入所需要的如jquery、vue等资源文件，可以在main.js文件中同一将这些资源文件打包导入，然后再引入main.js就可以使用资源文件了。
在main.js文件中，导入所需的资源模块，可以使用ES6的import语句，如import $ from 'jquery' //表示从 node_modules中导入jquery到main.js文件中，并使用 $ 来接收，然后创建$函数的入口，进行操作。
但是，由于浏览器解析不了ES6代码，所以直接import导入模块后，在index.html使用script标签引入main.js文件，在浏览器中会报错，“Uncaught SyntaxError: Unexpected identifier”。
解决方案自然就是通过我们的webpack前端打包工具，将main.js文件处理生成一个浏览器能够运行的文件，在命令行中输入 webpack ./src/main.js ./dist/bundle.js 表示使用webpack将main.js转存为新的bundel.js文件（新文件名称任意，但推荐使用bundel这个名称）
然后在index.html文件中引入新生成的bundle.js文件即可正常运行

index.html文件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<script src="../dist/bundle.js"></script>
	</head>
	
	<body>
		<div #app>
			<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>
		</div>

	</body>
</html>
main.js文件
//main.js  作为项目的入口文件，在此处导入需要的文件

//导入jQuery，
// import *** from ***  是ES6中导入模块的方式
//由于浏览器解析不了ES6代码，所以执行下面导入的方式会报错
import $ from 'jquery' //表示从 node_modules中导入jquery ， 并使用  $ 来接收


$(function(){
	$('li:odd').css("background-color","yellowgreen");
	$('li:even').css("background-color","pink")
})
效果：

创建配置文件 webpack.config.js 对入口，出口文件进行配置，使得在命令行中只需要输入 webpack即可生成打包好的文件。（在根目录下创建）
const path=require('path')

//通过Node中的模块操作，向外暴露一个配置对象
module.exports={
	entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
	output:{//输出文件相关的配置
		path:path.join(__dirname,'./dist'),//指定打包好的文件输出到哪个目录
		filename:'bundle.js' //指定输出文件的名称
	}
}
参考链接：webpack版本问题

友人C君~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack（3.8.1版本）使用方式实例

初始配置首先在HBuilder中创建目录文件然后在“运行”中打开刚才配置好的cmd命令行工具在cmd命令行中先进入文件目录使用 npm init -y 命令进行初始化然后就可以下载你所需要的文件包了，例如使用 npm install vue -S 下载vue.js文件在HBuilder目录里能看到node_modules文件，如果没有自动更...
复制链接

扫一扫