-
新建一个项目文件夹,执行
npm init -y
,得到一个package.json的文件 -
在项目根目录下,新建文件夹src>index.html 、index.js
-
根目录下,新建webpack.config.js(webpack的配置文件),并初始化webpack的基本配置
//webpack.config.js
module.exports = { //webpack是基于node的,所以语法用的是commonjs
mode:'development',//用来指定构建模式,可选值有development production
}
//package.json
"script":{
"dev":"webpack",//script节点下的脚本,可以通过npm run执行,例如:npm run dev
}
- 在项目中安装webpack的两个包
npm i webpack@5.5.1 webpack-cli@4.2.0 -D
注:-D安装在开发环境,上线版本就不需要了 - 执行
npm run dev
之后,根目录下会自动生成dist>main.js
是将src>index.js打包得到的 - index.html中直接引入index.js,如果index.js中存在新语法在浏览器中不兼容,比如:es6的import、export模块的导入导出,浏览器就会报错
- 打包后的main.js就处理了部分兼容问题,所以index.html中要引入打包后的main.js而不是src>index.js