最全的react视频【黑马程序员】--第二章创建基本的webpack4.x项目（结论步骤版）

最新推荐文章于 2024-05-20 15:08:22 发布

老张谋

最新推荐文章于 2024-05-20 15:08:22 发布

阅读量678

点赞数

分类专栏：前端技术文章标签： react

本文链接：https://blog.csdn.net/wgf5845201314/article/details/88808207

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

一、webpack 基本配置文件

二、webpack4.x最基本的使用步骤

三、webpack-dev-server 配置

四、html-webpack-plugin 配置

一、webpack 基本配置文件

1. webpack可以做什么事？

能够处理js文件的互相依赖性；
能够处理js的兼容问题，把高级的，浏览器不识别的语法，转为低级的，浏览器能正常识别的语法；
运行命令格式（手动打包出入口文件）：webpack 要打包的文件的路径打包好的输出文件的路径；
如果在 webpack.config.js 文件中配置了 “出入口文件” ，运行命令格式直接就是：webpack ；

2. 项目根目录下新建：webpack.config.js

webpack.config.js 文件的具体配置参数如下：

var path = require('path')

module.exports = {//在配置文件中需要手动指定 入口 和 出口
	entry: path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
	output:{//输出文件相关配置
		path: path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
		filename: 'main.js'//指定 输出的文件的名称
	},
	mode:'development',//development production
	plugins:[
        //所有webpack 插件的配置节点
	],
	module:{//配置所有第三方模块 加载器 loader
		rules:[//第三方模块的匹配规则
			//处理...文件的第三方loader规则
		]
	},
	resolve:{
		extensions:['.js','.json','.vue'],//表示，这几个文件的后缀名 可以省略不写
		alias:{//表示别名
			'@':path.join(__dirname,'./src')//这样,@ 就表示 项目根目录中 src 的这一层路径
		}
	}
}

注意：

webpack4.X以下的版本，需要手动指定 “出入口文件”（entry 和 output ）。
webpack4.X以上的版本提供了约定大于配置的概念，目的是为了尽量减少配置的体积。默认约定了：
打包入口文件是： src->index.js；
打包输出文件是： dist->main.js；
新增了 mode 选项（为必选项），可选值为：development 和 production。production：打包的时候 main.js 会被压缩；所以不需要配置 entry 和 output 。但可以手动指定新的 “出入口文件”；

二、webpack4.x最基本的使用步骤

1. 新建文件夹，创建一个名为 01.webpack-base 的项目

2. vscode打开该文件夹

3. 运行 npm init -y 快速初始化项目，生成package.json文件

npm init -y

（package.json包管理配置文件，将来创建的包都在这里记录）

4. 在项目根目录

创建 src 源代码目录和 dist 产品目录

在src下创建 index.html 文件，并引入 index.js 文件

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

5. src 下创建 index.js 文件

console.log('ok')

6. 安装插件

全局安装 cnpm

npm i cnpm -g

安装webpack

cnpm i webpack -D

安装webpack脚手架 cnpm i webpack webpack-cli -D，它提供了webpack的命令行工具

cnpm i webpack webpack-cli -D

注意：3.6中webpack有连个功能：命令行和打包，但是在4.x版本中，打包功能改用了webpack-cli

开始打包文件

node_modules\.bin\webpack

7. 添加webpack.config.js文件

//向外暴露了一个打包的配置对象；
//因为webpack是基于Node构建的，所以webpack支持所有Node API和语法
module.exports={
    mode: 'development'    //development 开发环境 、 production 产品环境
}

//行不行？目前不行
//export default{}

8. 编译即可成功在dist目录下生成，main.js文件，浏览器运行可出结果

三、webpack-dev-server 配置

作用：自动打包编译（但仍需手动保存）。但仍需手动加入main.js (不是dist目录下的，而转为内存中的)安装配置好后可以直接： npm run dev，直接运行项目。

1. 安装 webpack-dev-server：

cnpm i webpack-dev-server -D

2. 在 package.json 文件中新增 “dev”，如下：

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

在 “dev” 中进行端口、域名等…配置，如下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot --host 127.0.0.1"
  },

open：直接打开浏览器 [open firefox ：默认打开火狐]
port 3000：端口号 3000
contentBase src：打开规定的目录(页面)
hot：实现页面无刷新就获取新的数据
host：域名

webpack-dev-server，是把打包好的main.js是托管到了内存中，所以在项目 根目录 中看不到；但是我们可以认为，在项目根目录中，有一个看不到的 main.js ；

这时在 index.html 文件中，引入根目录的 main.js 是这样的：

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

四、html-webpack-plugin 配置

作用：自动在内存中根据指定页面生成一个内存的页面；自动把打包好的 main.js 追加到页面中去。

1. 安装 html-webpack-plugin ：

cnpm i html-webpack-plugin -D

2. 在webpack.config.js 中配置如下：

const path = require('path')
//导入插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
//导入在内存中自动化生成index页面的 插件

//创建一个插件的实例对象

const htmlPlugin = new HtmlWebPackPlugin({
    //源文件,表明是根据哪个文件生成内存中的页面   注意dirname前面是两个下划线
    template: path.join(__dirname, './src/index.html'),
    //生成的内存中网页的名称
    filename: 'index.html'
})
//
module.exports = {
    mode: 'development',
    plugins:[
        htmlPlugin
    ]
  
}

配置完后，在 index.html 文件中就不需要手动写入 main.js 。如下是 index.html：

浏览器打开页面后，查看源代码：

index.html 文件中可以删去 main.js的引入

<!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>Index 首页</title>
    <!-- <script src="../dist/main.js"></script> -->
    <!-- <script src="/main.js"></script> -->
</head>
<body>
    <h1>455</h1>
</body>
</html>

运行命令：