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-clinpm i webpack-cli -D// 项目本地安装webpack-dev-servernpm 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等目录平级

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