webpack4.x搭建项目基本步骤

最新推荐文章于 2021-07-08 19:13:53 发布

sxs7970

最新推荐文章于 2021-07-08 19:13:53 发布

阅读量509

点赞数 1

分类专栏：前端 webpack 文章标签： webpack4.x webpack4.x搭建项目基本步骤

本文链接：https://blog.csdn.net/sxs7970/article/details/90045827

版权

前端同时被 2 个专栏收录

132 篇文章 2 订阅

订阅专栏

webpack

16 篇文章 0 订阅

订阅专栏

文章目录

webpack4.x 版本搭建项目基本跟 webpack3.x 版本一样，只不过 webpack4.x有自己的特性，接下来借用4.x版本，详细的说一下搭建整个项目的步骤：

准备工作

首先创建一个项目根目录，然后初始化一下项目，在项目根目录下运行：npm init -y ；这时项目根目录中出现一个 package.json 这个文件；
在项目根目录下创建 src 和 dist 这两个文件夹（前者里放的是你的源文件，后者里放的是要打包的文件）
1. 在 src文件 下创建 index.html 和 index.js 两个文件；
  注：为什么起 index.js 这样命名，也是webpack4.x的一个特性，下边有讲解
在项目根目录下，安装 webpack 和 webpack-cli ；运行 cnpm i webpack webpack-cli -D ；（这里cnpm 没有的话自己安装，用 npm 也行，只不过下载安装比较慢）

注：你可以在你的index.js 文件中简单的写入console.log('ok') 作为测试代码！！！

配置 webpack-config.js 文件

准备工作都做好了，使用 webpack 打包命令，进行打包，但是报错，出现一个关于mode 的报错，
不用着急接下来就是 webpack4.x新版本的功能：(以及上边所说的为什么要 index.js 这样命名)

首先要用webpack打包，所以就要先创建一个配置文件进行配置，在项目根目录下创建 webpack-config-js 文件；（也就是与package.json 文件同级）
```
// 向外暴露一个打包的配置对象;因为 webpack 是基于 Node 构建的；所以 webpack支持所有 Node API  和 语法
// webpack4.x 中的特性，不需要再 配置 打包入口文件和出口文件了（在3.x的版本，就需要配置入口和打包出口文件）
module.exports = {
	mode:"development", //development(开发模式)  production(产品模式，这个模式会压缩打包好的文件)
	//在webpack4.x版本中，有一个很大的特性，就是约定大于配置，约定默认打包入口路径是 src -> index.js
}
```
注：
1. webpack4.x 提供了 约定大于配置 的概念，目的是为了尽量减少 webpack.config.js 这个配置文件的体积；（记住这里的 约定大于配置 非比真的大于配置，你如果按照3.x的版本继续写打包入口文件和打包出口文件，也照样可以！！！）
2. 版本4.x的默认约定：
  1. 打包的入口文件是 src -> index.js
  2. 打包输出的文件是 dist -> main.js
  3. webpack4.x 中新增 mode 选项（此选项必须要有），可选值为development 和 production；

以上工作做完，输入 webpack 命令，在dist文件下就会有一个main.js文件，然后打开浏览器的控制台，就会看见你的测试代码 OK；（前提是在你的inde.html文件中引入打包文件main.js）

webpack-dev-server 的配置和功能

以上都做完以后，每次修改代码的时候，都要保存一下，然后还要重新输入 webapck 命令进行重新打包编译
以上哪种做法太麻烦，所以引出了 webpack-dev-server
它的作用就是能够进行 实时打包
再也不用输入 webpack 这个命令来进行打包了！！！

在项目根目录下安装webapck-dev-server ；运行 cnpm i webpack-dev-server -D ；
然后在 package.json 配置文件下，能够看到你所安装的所有的东西，然后进行如下配置：
```
"scripts":{
	"dev":"webpack-dev-server --open --port 3003 --hot --host 124.0.0.1"
}
```
注：这里dev 下的参数分别表示：
1. webpack-dev-server：这里就是安装的那个插件，要借用它来进行打包编译
2. --open：默认自动在浏览器中打开
3. --port 3003：默认打开的端口号，自己可以设置
4. --hot ：热加载
5. --host 127.0.0.1 ：设置域名

注：以上配置好后，那么再次进行打包编译的命令就是 npm run dev；意思就是通过命令要跑scripts节点下的dev属性（然而这个属性里边有你配置的一系列的参数）；

把之前的测试代码改成console.log('oook')，然后打包编译运行一下，发现也没有报错，但是控制台输出的还是ok，这里有引出了webpack-dev-server 第二个功能：

在这里插入图片描述
注：在你打包的过程中出现的第二行意思是说：webpack 打包出来的文件是在项目的根目录下托管着；（output：理解成打包出来的文件，/ ：表示根目录）

webpack-dev-server 第二个功能：

webpack-dev-server 打包好的 main.js 是 托管到内存中 的，没有在物理磁盘中，所以在项目根目录下看不到，但是我们可以认为，在项目的根目录中，有一个看不见的 main.js 文件

那么问题也就解决了，在index.html 文件里，你引入的是 dist 文件下的 main.js，所以输出仍旧是ok，只需要换成根目录下的main.js就行了：/main.js

html-webpack-plugin 的配置和功能

把 index.html 页面打包也放入到内存中；
解决在 index.html 中引入 main.js 文件时到底该怎么写路径这个问题；
这个插件有个能力就是会把打包好的 main.js 文件自动追加到页面中，所以不再用物理磁盘中的index.html中 (也就是项目目录) 引入main.js文件

首先在项目根目录下安装html-webpack-plugin插件，运行 cnpm i html-webpack-plugin -D ；

在webpack-config.js 文件中进如下配置(注释)：

// 导入path
const path = require('path')
//导入在内存中自动生成 index 页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
// 创建一个插件实例对象
const htmlPlugin = new HtmlWebPackPlugin({
	template:path.join(__dirname,'./src/index.html'),//源文件
	filename:'index.html' //生成的内存中页面的名称
})

module.exports = {
	mode:'development',
	plugins:[//用来配置第三方插件的
		htmlPlugin
	]
}

注：以上配置完后，那么在index.html 文件中，就不需要再引入main.js文件了，因为这个插件会自动把打包好的 main.js 文件自动追加到页面中！！！，不信的话，在页面右键查看网页源代码。

附一张我的如图：
在这里插入图片描述

附加：（解决组件导入时后缀加不加的问题 && 解决路径问题）

配置：在引入组件的时候，可以省去组件的后缀，例如React组件中的后缀名 .jsx，
配置：在引入路径的时候，配置根路径

打开 webpack.config.js 文件添加resolve 节点，进行如下配置

  resolve: {//表示这几个文件的后缀名可以不写，默认补全
        extensions: ['.js', '.jsx', '.json'],
        alias:{//表示别名
            '@':path.join(__dirname,'./src') //这样，@ 符号就表示，项目根目录下 src的这一层路径
        }
    }