关于手动使用webpack进行项目构建总结-技术教程-四时宝库

2020-11-09

总结一下手动使用webpack进行项目构建，都有哪些步骤，以及有哪些步骤需要注意的

以下内容前提条件是安装了node.js

一首先创建项目路径并添加src、dist项目结构

src下文件包括css、js、images、index.html、main.js

main.js是项目打包的入口文件

F:\project_center\webpack_project

在项目根路径中调用DOS窗口，输入生成项目配置文件package.json指令

npm init -y

二安装全局webpack，输入以下指令

npm i webpack -g

注意：webpack4版本及以上，使用webpack时，都需要安装webpack-cli

npm i webpack-cli -g

在项目中添加webpack.config.js文件，此文件是针对webpack的配置文件

// require引入path路径
const path = require('path')

// 通过node模块操作，向外部暴露一个配置对象
module.exports = {
  entry : path.join(__dirname , './src/main.js'), // 设置webpack打包入口文件
  output : {
    path : path.join(__dirname , './dist'), // 设置项目打包的输出文件路径
    filename : 'bundle.js' // 指定项目输出文件名称
  }
}

例如，在index.html中写入一个table表格

<style type="text/css">
	table {
		width: 50%;
		border: 1px solid aqua;
	}

	td {
		text-align: center;
		line-height: 30px;
	}
</style>


<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>戴维</td>
		<td>男</td>
		<td>15</td>
	</tr>
	<tr>
		<td>徐飞</td>
		<td>女</td>
		<td>22</td>
	</tr>
	<tr>
		<td>欧豪</td>
		<td>男</td>
		<td>24</td>
	</tr>
</table>

因为使用jquery开发，所以要在项目中安装jquery

npm i jquery -D

在main.js文件中写入jquery脚本代码

import $ from 'jquery' // ES6语法导入jquery

$(function(){
  $("table tr:odd").css('backgroundColor' , 'yellow');
  $("table tr:even").css('backgroundColor' , '#ff7700');
})

// 注意：
// 因为import语法是ES6语法，所以在普通的项目中js文件是不能使用其他js文件的
// 但是webpack能做到这点：
// 1、webpack能够更好的处理各个js文件的相互依赖关系
// 2、webpack可以处理js的兼容问题，能把高级浏览器不识别的语法
// 例如ES6语法、TS语法等等，转换成低级的，浏览器可识别的ES5语法

// 执行项目完整的打包命令行代码：
// webpack  项目需要打包的文件路径  打包完之后的文件输出路径
webpack ./src/main.js ./dist
// 因为设置了webpack.config.js中的entry和output，可以直接输入webpack敲击回车进行打包
// 控制台中输入webpack指令时,操作哪几步骤:
// 1、webpack发现我们没有通过命令形式,给他指定入口和出口
// 2、webpack会去根目录寻找webpack.config.js配置文件
// 3、找到配置文件后,解析执行这个配置文件,解析完后,得到一个配置对象
// 4、当webpack拿到配置对象后,就拿到了指定的入口、出口进行项目打包构建

在dist文件夹中，会出bundle.js文件

在index.html中引入这个文件，就会得到相应的效果

<script src="../dist/bundle.js"></script>

虽然已经打包成功，但是不足是当修改项目代码的时候，还需要再次webpack打包，以及每次按ctrl+s的时候，都需要进行打包才能预览到最新的项目效果

所以官方提供了webpack-dev-server这么个东西

这个webpack-dev-server的作用是用于当每次修改代码后保存项目时，会自动运行webpack打包过程并实时监听项目变化

敲入以下指令导入webpack-dev-server：

// 使用webpack-dev-server工具,来实现项目自动打包编译功能
// 1、使用cnpm i webpack-dev-server -D安装工具依赖
// 2、安装后,工具用法和webpack命令用法一毛一样
// 3、由于是本地安装的webpack-dev-server,所以无法当做本地脚本命令,只有在全局安装的依赖才能在控制台中运行
// 4、要想正常使用webpack-dev-server,要求在本地项目中安装cnpm i webpack -D指令

// 需要项目本地安装webpack-cli
npm i webpack-cli -D
// 项目本地安装webpack-dev-server
npm i webpack-dev-server -D

安装好之后在package.json的"scripts"对象中写入

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server"
},

并且要在index.html中，把../dist/bundle.js改成/bundle.js

<script src="/bundle.js"></script>

打开项目终端，输入npm run dev就能运行项目，无论怎么修改项目代码，看到的都是最新的代码

注意：如果在npm run dev时报错，那可能是webpack、webpack-cli或webpack-dev-server版本太高，按照以下配置进行依赖安装即可解决报错问题

// npm run dev报错Error: Cannot find module 'webpack-cli/bin/config-yargs'
"devDependencies": {
  "webpack": "^5.4.0",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
}

补充小知识：

webpack-dev-server帮我们打包的bundle.js文件并没有放到实际的物理磁盘上

而是托管到了电脑的内存中

所以在项目目录中找不到bundle.js这个文件

webpack-dev-server打包好的bundle.js文件

以一种虚拟的形式,托管到了项目根路径目录中

虽然看不见

但它是和dist、src等目录平级

因为内存比硬盘的读取速度快太多了

四时宝库

程序员的知识宝库

关于手动使用webpack进行项目构建总结