项目结构
webpackBase
│ webpack.config.js
├─public
│ index.html
└─src
index.js
安装依赖
在webapckBase目录下运行
npm i webpack webpack-cli --save-dev
webpack.config.js配置文件
const { resolve } = requrie('path');
module.exports = {
// 模式还可以设置为production,两种方式进行的打包优化不同
mode: 'development',
// 打包的入口文件-单一文件打包方式
entry:'./src/index.js',
output:{
// 打包文件输出的目录
path: resolve(__dirname,'dist'),
// 打包文件输出的文件名
filename:'index.js'
}
}
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>Document</title>
<!-- 引入打包后的index.js文件 -->
<script src="../dist/index.js"></script>
</head>
<body></body>
</html>
打包命令
- 方式一:在webapckBase目录下运行
webpack --config ./webapck.config.js
- 方式二:在package.json文件的scripts属性新增如下命令
{
...
"scripts":{
"build":"webpack --config ./webpack.config.js"
}
...
}
修改保存后,在webpackBase目录下运行如下命令:
npm run build
打包后的目录
webapckBase
│ package-lock.json
│ package.json
│ webpack.config.js
├─dist
│ index.js
├─public
│ index.html
└─src
index.js