首先我们创建一个新的项目,项目的目录结构如下:
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的基本使用