Webpack5基本使用及基础配置_html-js-css

文章目录一、前言1.1 为什么需要打包工具1.2 有哪些打包工具二、基本使用2.1 简介2.2 基础使用2.2.1 资源目录2.2.2 创建文件2.2.3 下载依赖2.2.4 启用Webpack2.2.4.1 开发模式2.2.4.2 生产模式 2.2.5 观察输出文件2.3 小结三、基本配置3.1 五大核心概念3.2 编写Webpack 配置文件3.3 运行指令3.3 小结四、开发服务器&自动化4.1 安装依赖4.2 配置4.3 运行指令

一、前言 1.1 为什么需要打包工具

简单来说，在开发中，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

1.2 有哪些打包工具 GruntGulpParcelWebpackRollupVite…
目前市面上主流的是Webpack，所以文章主要以 Webpack 来介绍使用打包工具。二、基本使用 2.1 简介

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器段运行了。

我们将 Webpack 输出的文件叫做 bundle。

Webpack 本身功能是有限的:

开发模式：仅能编译JS中的ES Module语法生产模式：能编译JS中的ES Module语法，还能压缩JS代码 2.2 基础使用 2.2.1 资源目录

新建webpakc5demo文件夹，使用VSCode打开，项目目录如下：

webpakc5demo # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── sub.js
        │   └── sum.js
        └── main.js # 项目主文件

2.2.2 创建文件

sub.js

export default function sub(x, y) {
  return x - y;
}

sum.js

export default function sum(x, y) {
  return x + y;
}

main.js

import sub from './js/sub'
import sum from './js/sum'

console.log(sub(10, 5));
console.log(sum(10, 5));

在项目根目录下，新建public/index.html

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack5Demotitle>
  <script src="../src/main.js">script>
head>

<body>
  <h2>hello webpack5h2>
body>

html>

使用浏览器打开index.html，控制台报错如下：

这就验证了开头说的，浏览器无法识别模块化语法，需要将其编译为能识别的js css才能正常运行。

2.2.3 下载依赖

打开终端，进入项目根目录，运行如下命令：

初始化package.json

npm init -y

生成package.json，如下：

{
  "name": "webpack5demo",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

下载依赖

npm i webpack webpack-cli -D

此时，在package.json中会有新安装的依赖，如下：

"devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
}

2.2.4 启用Webpack 2.2.4.1 开发模式

npx webpack ./src/main.js --mode=development

2.2.4.2 生产模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来

--mode=xxx：指定模式（环境）

2.2.5 观察输出文件

默认Webpack会将文件打包输出到dist目录下，我们查看dist目录下文件情况就好了。

此时，public/index.html引用dist/main.js的话，就不会有报错信息了，原因你懂得。

2.3 小结

Webpack本身功能比较少，只能处理 js资源，一旦遇到css等其他资源就会报错。

所以我们学习Webpack，就是主要学习如何处理其他资源。

三、基本配置

在开始使用Webpack之前，我们需要对Webpack的配置有一定的认识。

3.1 五大核心概念 entry：入口，指示Webpack从哪个文件开始打包output：输出，指示 Webpack 打包完的文件输出到哪里去，如何命名等loader：加载器，webpack本身只能处理 js、json等资源，其他资源需要借助loader，Webpack 才能解析plugins：插件，扩展 Webpack的功能mode：模式，主要由两种模式开发模式开发模式：development生产模式：production 3.2 编写Webpack 配置文件

在项目根目录下新建文件：webpack.config.js，并添加内容如下：

const path = require('path') // nodejs核心模块，用来处理路径问题

module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    // 文件输出路径
    // __dirname nodejs变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  // 加载器
  module: {
    rules: [

    ]
  },
  // 插件
  plugins: [

  ],
  // 模式
  mode: 'development'
}

Webpack是基于Node.js运行的，所以采用Common.js模块化规范

3.3 运行指令

执行

npx webpack

该指令会去项目根目录下读取webpack.config.js配置文件，此时功能和之前(二、基本使用)一样，也不能处理样式资源。

3.3 小结

Webpack将来都通过webpack.config.js文件进行配置，来增强Webpack的功能

我们后面会以两个模式来分别搭建Webpack的配置，先进行开发模式，再完成生产模式

四、开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化实现。

4.1 安装依赖

npm i webpack-dev-server -D

4.2 配置

修改webpack.config.js配置

//开发服务器
devServer: {
 host: '127.0.0.1', // 域名
 port: '3000', // 端口
 open: true // 是否自动打开浏览器
},
// 模式
mode: 'development'

4.3 运行指令

现在就不是运行npx webpack了，而是需要执行npx webpack serve，启动服务后，会自动打开浏览器显示页面http://127.0.0.1:3000/，此时，如果在main.js中修改，那么就会即时生效了。

并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1296450.html

Webpack5基本使用及基础配置

发表评论

评论列表（0条）