搭建Webpack环境

安装全局 webpack

npm install --save webpack@5.73.0
npm install --save webpack-cli@4.10.0

温馨提示

由于 webpack 版本更新迭代较快，为了避免版本带来的错误，在接下来的包安装中，都需要指定具体版本信息，如上述版本添加方式，请各位同学保持与老师一致的版本

创建本地项目文件夹

xxxxxxxxxx
mkdir webpack_demo
cd webpack_demo

初始化项目

xxxxxxxxxx
npm init

安装 webpack 到本地

xxxxxxxxxx
npm install --save-dev webpack@5.73.0
npm install --save-dev webpack-cli@4.10.0

使用webpack

创建项目结构src、public

xxxxxxxxxx
// src/show.js
export function show(content) {
    window.document.getElementById('root').innerText = 'Hello,' + content;
}

xxxxxxxxxx
// src/index.js
import { show } from './show.js'
show('iwen');

执行webpack

温馨提示

webpack会自动寻找src目录，然后寻找index.js入口文件，然后进行打包，最终生成一个dist目录为打包后内容。

在public下创建index.html，引入自动生成的main.js文件

xxxxxxxxxx
<!-- index.html -->
<div id="root"></div>
<script src="../dist/main.js"></script>

实时效果反馈

1. 执行webpack的命令是什么：

A npm install --save webpack

B npm install --save webpack-cli

C npm init

D webpack

答案

1=>D