1.webpack的基本使用

发布于 2022年 02月 14日 14:05

首先我们创建一个新的项目,项目的目录结构如下:

heading.js文件的代码如下:

export default () => {  const element = document.createElement('h2')  element.textContent = 'Hello world'  element.addEventListener('click', () => {    alert('Hello webpack')  })  return element}

index.js文件的代码如下:

import createHeading from './heading.js'const heading = createHeading()document.body.append(heading)

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>Webpack - 快速上手</title></head><body>  <script type="module" src="src/index.js"></script></body></html>

然后我们先来运行一下这个项目

运行之前我们先安装serve这个插件,用来帮我们生成localhost链接

npm i serve -g

将这个插件作为全局安装才可以直接使用serve .这样的命令运行项目

安装过后我们使用指令运行项目:

serve .

成功过后出现以下提示:

按住ctrl + 鼠标左键打开链接

如果打开之后界面能正常显示,说明我们的项目是没有问题的

通过ctrl + c来终止当前操作

下面我们来安装webpack

因为我们的webpack将作为开发依赖安装,所以安装webpack之前我们先来初始化package.json文件

npm init -yes

这里的-yes是使用默认配置的意思,主要是为了省略提问过程

出来package.json文件之后,我们来安装webpack

npm  i  webpack@4.44.2   webpack-cli@3.3.12  -D

在这里之所以指定版本号,是因为这时候webpack正在升级,默认安装最新版可能会有问题

安装完了之后

我们打开package.json文件,看到scripts属性这里

我们把test字段去掉,新增build字段,具体如下:

"build":"webpack"

然后打开终端,输入:

npm run build

就可以将项目打包输出到dist目录下,webpack默认打包的目录名称为dist,文件名称为main

dist目录下有一个main.js,里面的代码都是压缩过后的

然后我们打开index.html文件,修改script标签,将src修改为“dist/main.js”,然后把type="module"去掉,因为打包过后的main.js文件已经将es6转换为es5,不在使用ES Module规范,用的是commonJS规范,所以就不需要这个属性

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

然后我们在终端再次运行serve .

点击生成的链接,可以看到依然可以正常运行

以上就是webpack的基本使用

推荐文章