webpack4.x项目的基本配置、使用步骤、新增特性详解

最新推荐文章于 2022-05-06 13:04:45 发布

僵尸C掉了我的脑子

最新推荐文章于 2022-05-06 13:04:45 发布

阅读量329

点赞数 1

本文链接：https://blog.csdn.net/qq_35457469/article/details/102884175

版权

webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.新建空文件夹

在这里插入图片描述

2.快速初始化项目

创建包管理工具，运行如下命令：

npm init -y

在这里插入图片描述
运行后创建的相关配置文件如下图：

3.创建目录

在项目根目录创建src源代码目录和dist产品目录
在src目录下创建index.html

4.安装webpack

使用cnpm安装webapck，运行：

cnpm i webpack webpack-cli -D

全局运行npm i cnpm -g

5.约定大于配置

注意：webpack4.x提供了约定大于配置的概念；目的是为了尽量减少配置文件的体积

默认约定了：
打包的入口是src -> index.js
打包的输出文件是dist -> main.js
4.x中新增了mode选项（为必选项），可选的值为：development和production

6.配置webpack-dev-server

在内存中生成打包好的main.js文件;把main.js托管到内存中
运行如下命令进行安装：

cnpm i webpack-dev-server -D

在package.json中进行如下配置：
在这里插入图片描述
至此，就可以使用’npm run dev’来运行了!!!

7.配置html-webpack-plugin插件

在内存中生成首页，并自动把打包好的js注入到页面中去

运行如下命令进行安装：

cnpm i html-webpack-plugin -D

在webpack.config.js中进行如下配置：
在这里插入图片描述

另附配置详情（全）：

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

index.js

// 假设，main.js还是我们的入口文件
console.log('ok==')
// webpack-dev-server 打包好的 main.js 是托管到了内存中；所以在项目目录中看不到；
// 但是，我们可以认为，在项目根目录中，有一个看不见的 main.js

package.json

{
  "name": "01-webpack-base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

webpack.config.js

{
  "name": "01-webpack-base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

僵尸C掉了我的脑子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack4.x项目的基本配置、使用步骤、新增特性详解

1.新建空文件夹2.快速初始化项目创建包管理工具，运行如下命令：npm init -y运行后创建的相关配置文件如下图：3.创建目录在项目根目录创建src源代码目录和dist产品目录在src目录下创建index.html4.安装webpack使用cnpm安装webapck，运行：cnpm i webpack webpack-cli -D全局运行npm i cnpm ...
复制链接

扫一扫