webpack-4.x基本使用+版本配置+坑的解决

最新推荐文章于 2023-11-18 13:22:20 发布

laker Zhang

最新推荐文章于 2023-11-18 13:22:20 发布

阅读量552

点赞数 1

文章标签： node.js 小程序 webpack

本文链接：https://blog.csdn.net/layxing27/article/details/109193545

版权

1 介绍

1.1 版本4.x

2 安装

2.1 基本安装

2.1.1 全局安装

cnpm i webpack -g

2.1.2 项目安装

cnpm i webpack -D

2.1.3 项目其他安装

cnpm i webpack -S

2.2 配合安装

2.2.1 项目安装

cnpm i webpack-cli -S

3 使用

3.1 搭建项目结构

3.1.1 创建项目文件夹

mkdir wbp

3.1.2 初始化项目

执行以下命令后,在项目根目录下产生package.json文件

npm init -y

3.1.3 创建需要的文件夹

dist 项目完成后的打包文件
src 项目开发的源文件(之后开发所在的文件夹)

cd wbp

mkdir dist

mkdir src

3.1.4 创建所需的文件

src/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1> index 主页</h1>

</body>
</html>

3.1.5 创建入口文件

在4.x中,约定默认大于配置
- 默认打包src/index.js ------> dist/main.js
- 所以创建以下文件
src/index.js

console.log('hello webpack!')

在这里插入图片描述

3.1.6 项目搭建完成

在这里插入图片描述

3.2 打包

3.2.1 工具

使用webpack-cli依赖
该依赖提供直接执行webpack将会打包

webpack

在这里插入图片描述

3.2.2 警告配置

1 配置

创建wbp/webpack.config.js文件
mode默认为生产模式—>production

module.exports = {
    mode: "development" // "production"-->为默认
}

2 使用

执行打包命令

webpack

在这里插入图片描述

3.3 实时编译

在node中我们使用nodemon可以一直挂载着app.js,只要文件发生改变就编译
在使用打包命令后,文件更改后,不会自动编译

3.3.1 工具 webpack-dev-serve

是可以进行挂载式编译的工具
所挂载的文件是运行在内存中,所有运行速度快

3.3.2 工具安装

1 执行命令

cnpm i webpack-dev-serve -D

2 配置

总结

问题一:报错找不到

在这里插入图片描述

推荐版本安装

参考链接
package.json 文件

{
  "name": "test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2",
    "webpack-hot-middleware": "^2.22.0",
    "webpack-merge": "^4.1.1"
  }
}

由于vscode 启用的默认端口为5500,webpack-dev-server启动的为8080端口
因此会出现找不到文件的错误
webpack-dev-server 挂载的文件在内存中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://localhost:8080/main.js"></script>
</head>
<body>
    webpack
</body>
</html>

laker Zhang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack-4.x基本使用+版本配置+坑的解决

文章目录1 介绍1.1 版本4.x2 安装2.1 基本安装2.1.1 全局安装2.1.2 项目安装2.1.3 项目其他安装2.2 配合安装2.2.1 项目安装3 使用3.1 搭建项目结构3.1.1 创建项目文件夹3.1.2 初始化项目3.1.3 创建需要的文件夹3.1.4 创建所需的文件3.1.5 创建入口文件3.1.6 项目搭建完成3.2 打包3.2.1 工具3.2.2 警告配置1 配置2 使用3.3 实时编译3.3.1 工具 webpack-dev-serve3.3.2 工具安装1 执行命令2 配置
复制链接

扫一扫