1.安装mode.js、npm本地环境，lue
2.命令语言
mkdir webpack_demo //建立文件夹
cd webpack_demo //进入文件夹
npm install -g webpack //全局安装webpack
npm init //初始化
npm install --save-dev webpack //安装目录
3.建立项目基本结构
src文件夹 ----存放编写的源码
dist文件夹 ----存放webpack打包后的文件
dist下建立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>jspang webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
src下建立entry.js文件，代码如下：
document.getElementById(‘title‘).innerHTML=‘Hello Webpack‘;
4.配置文件
项目根目录下创建webpack.config.js文件，代码如下：
const path = require(‘path‘);
module.exports={
//入口文件的配置项
entry:{
//里面的entery是可以随便写的
entry:‘./src/entry.js‘
},
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,‘dist‘),
//打包的文件名称
filename:‘bundle.js‘
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
如果需要多入口，多出口文件我们只需要做如下修改：
const path = require(‘path‘);
module.exports={
//入口文件的配置项
entry:{
entry:‘./src/entry.js‘,
//这里我们又引入了一个入口文件
entry2:‘./src/entry2.js‘
},
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,‘dist‘),
//输出的文件名称
filename:‘[name].js‘
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
在入口文件配置中，增加了一个entry2.js的入口文件（这个文件你需要自己手动建立），这时候要打包的就有了两个入口文件。在代码14行我们把原来的bundle.js修改成了[name].js
待续。。。
时间： 2024-11-09 09:38:46