1.为什么会出现webpack?
前端页面越来越复杂,随着SPA技术的流行,JS越来越复杂。并且会需要一大堆依赖包,并且还有SCSS,LESS等扩展所以需要webpack进行打包管理。
2.webpack的作用:
【1】.可以将多个JS打包成一个文件,减少服务器压力和下载带宽。
【2】.将其他扩展性语言转换成Js,以便于浏览器解析。
【3】.项目优化,提升性能。
3.明确两个重要概念:
(1).开发环境:在开发时需要的环境,可以指在开发时需要依赖的包。
(2).生产环境:开发完成运行程序的环境。
4.步骤:
(1).创建目录
mkdir webpack_demo
cd webpack_demo //创建webpack_demo目录,并切近目录
(2).全局安装webpack
npm install -g webpack
(3).初始化——初始化的主要目的是生成package.json文件(这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等;
npm init
(4).项目目录的安装
npm install --save-dev webpack //--save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用
( 5 ).遗留问题
这时候webpack就安装完成了,在3.x中可直接使用webpack -v查看当前版本。 但是在4.x中会出现类似如下图:
问题分析:在webpack 3中,webpack本身和它的CLI以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。
尝试全局安装webpack-cli
npm install webpack-cli -g
全局安装完成后就可以使用webpack -v查看当前版本了。
6.建立基本项目结构:
在webpack_demo下面建立两个文件夹,src和dist
src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。
dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。
如下图:
1.我们在dist文件下手动建立一个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>jspang webpack</title>
</head>
<body>
<div id="title"></div>
<!-- bundle.js是webpack执行打包命令后生产的文件 -->
<script src="./bundle.js"></script>
</body>
</html>
2.接下来在src文件夹下建立entery.js的文件,用于编写我们的JavaScript代码,也是我们的入口文件。
document.getElementById("#box).innerHtml("hello webpack")
7.打包项目:
webpack src/entry.js dist/bundle.js
这时候又会出现报错:
中文意思就是:
1.mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
2. 无法解析’dist/bundle.js’ in ‘F:\web\demo1\webpack_demo’
原因是:webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack –mode development或者webpack –mode production,这样便会默认进行打包,入口文件是’./src/index.js’,输出路径是’./dist/main.js’,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。
所以我们需要修改dist/entery.js为index.js。修改之后直接使用webpack –mode development进行打包。
出现下图:
此时打开浏览器就会出现:hello webpack即为正确。