webpack的使用

最新推荐文章于 2024-01-13 16:41:53 发布

快乐de馒头

最新推荐文章于 2024-01-13 16:41:53 发布

阅读量388

点赞数

分类专栏： VueJs

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/103630514

版权

一、在网页中会引用哪些常见的静态资源？

常见的js文件后缀名： .js .jsx .coffee .ts（TypeScript 类 C# 语言）

常见的css文件后缀名：.css .less .sass .scss

Images

常见的图片文件后缀名：.jpg .png .gif .bmp .svg

字体文件（Fonts）

常见的字体文件后缀名：.svg .ttf .eot .woff .woff2

模板文件

常见的模板文件后缀名：.ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

二、网页中引入的静态资源多了以后有什么问题？？？

网页加载速度慢，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系

三、如何解决上述两个问题

合并、压缩、精灵图、图片的Base64编码
可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

四、什么是webpack?

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

五、如何完美实现上述的2种解决方案

使用Gulp压缩合并，是基于 task 任务的，小巧灵活；
使用Webpack压缩合并，是基于整个项目进行构建的；

借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
根据官网的图片介绍webpack打包的过程
webpack官网

六、webpack安装的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令,i是install的简写
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中,i是install的简写

全局安装webpack

npm i webpack -g

npm install webpack-cli -g

七、webpack的基本使用

第一步：新建项目

第二步：打开命令行窗口，进入到项目根目录：

第三步：执行npm init -y

之后在项目根目录会出来一个package.json文件。

第四步：安装webpack到项目

npm install --save-dev webpack
npm install --save-dev webpack-cli

这两行命令会为你的项目安装webpack和webpack-cli包，前者是webpack的核心库，后者是分离出来的webpack命令行功能，我们需要使用webpack-cli来进行项目的打包等操作。

第五步：安装项目依赖的包

这个项目需要安装jQuery 执行 npm install jquery --save

细心的朋友可能注意到，这里使用的是--save而不是--save-dev，两者的区别是，--save是生产环境的依赖，也就是供给用户使用的依赖，而--save-dev是开发环境的依赖，比如Webpack，在代码完成并且打包之后，就不需要再使用到它了，显然用户是无需接触到Webpack的，所以这里Webpack属于开发环境的依赖。

写main.js中的逻辑（隔行变色）

// 这是 main.js 是我们项目的JS入口文件

// 1. 导入 Jquery
// import xxx from xxx 是ES6中导入模块的方式
// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错,那么就需要使用webpack打包一下
import $ from 'jquery'
//在node里面导入包使用require const $ = require('jquery')

// 注意： webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；
// 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器；
// 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D
// 2. 打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；

$(function () {
  $('li:odd').css('backgroundColor', 'yellow')
  $('li:even').css('backgroundColor', function () {
    return '#' + 'D97634'
  })
})


// 经过刚才的演示，Webpack 可以做什么事情？？？
// 1. webpack 能够处理 JS 文件的互相依赖关系；
// 2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不是别的语法，转为 低级的，浏览器能正常识别的语法

// 刚才运行的命令格式：    webpack  要打包的文件的路径  打包好的输出文件的路径

第六步：项目根目录下创建webpack.config.js文件

在项目根目录下新建webpack.config.js文件，这个目录不能随便变动，因为webpack在执行构建时默认会从项目根目录下的webpack.config.js文件中读取配置。

webpack.config.js文件内容为：

const path=require('path');//node中的path模块

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports={
	//JavaScript执行入口文件,
	//entry:'./src/main.js',
	entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
	//需要指定一下输出的路径path和输出的文件名filename
	output:{// 输出文件相关的配置
		filename:'bundle.js',   //自定义输出文件名
		path:path.resolve(__dirname,'./dist')  // 指定 打包好的文件，输出到哪个目录中去
	},
	//设置mode
	 mode: 'development' // 设置mode，production生产环境，development开发环境
}

第七步：开始打包

即node_modules\.bin\webpack -d（开发环境）或者node_modules\.bin\webpack -p（生产环境）即可

// linux
node_modules/.bin/webpack -d
// windows
node_modules\.bin\webpack -d

或

// linux
node_modules/.bin/webpack-cli -d
// windows
node_modules\.bin\webpack-cli -d

main.js和jQuery库就打包为一个文件了

第八步：把bundle.js文件引入到index.html中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 
  <script src="../dist/bundle.js"></script> 


</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>
</body>

</html>

参考

https://blog.csdn.net/maolaixin/article/details/84102122

https://www.jianshu.com/p/333ac8d2afe3

八、webpack自动打包编译

webpack监听代码的改变自动打包编译。需要使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
运行cnpm i webpack-dev-server --save-dev安装到开发依赖
安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中

把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

 "dev": "webpack-dev-server --contentBase src"

同时修改index页面中script的src属性为<script src="bundle.js"></script>

1. 运行 npm install webpack-dev-server --save-dev 把这个工具安装到项目的本地开发依赖
2. 安装完毕后，这个工具的用法，和 webpack 命令的用法，完全一样
3. 由于，我们是在项目中，本地安装的 webpack-dev-server ，所以，无法把它当作脚本命令，在powershell 终端中直接运行；（只有那些安装到全局 -g 的工具，才能在终端中正

最低0.47元/天解锁文章

快乐de馒头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack的使用

一、在网页中会引用哪些常见的静态资源？ JS 常见的js文件后缀名： .js .jsx .coffee .ts（TypeScript 类 C# 语言） CSS 常见的css文件后缀名：.css .less .sass .scss Images 常见的图片文件后缀名：.jpg .png .gif .bmp .svg 字体文件（Fonts） ...
复制链接

扫一扫

专栏目录