本节知识点
- webpack 在项目中的实际打包
(一) 配置webpack.config.js
- webpack.config.js就是webpack的配置文件，这个文件需要在项目的根目录下手动建立。建立好以后敲下面的代码，这个就是webpack配置模板
module.exports = {
//入口配置项
entry:{},
//出口文件配置项
output:{},
//模块:例如解读css图片如何转换,压缩等等
module:{},
//插件:用于生产模板和各项功能
plugins:[],
//配置webpack开发服务的各项功能
devServer:{}
}
- entry (入口配置)
这个选项就是配置我们要压缩的文件一般是JS文件(也可以是css) 按照上节课的代码。你要填写的是src下面的enter.js文件
entry:{
//路径可以随便写
entry:"./src/enter.js"
}
- output 选项(出口配置)
出口配置用来告诉webpack最后打包文件的地址和文件名称。按照上次应该需要打包到dist目录下。这里用到了node path模块下面的 path
//这里必须要在文件开头引入path这个模块
//出口文件配置项 一个表示路径一个表示文件名
output:{
path: path.join(__dirname,"/dist"),
filename:"a.js"
}
- 全部代码
const path = require("path"); //加载path模块
module.exports = {
//入口配置项
entry:{
entry:"./src/enter.js"
},
//出口文件配置项
output:{
path: path.join(__dirname,"/dist"),
filename:"a.js"
},
//模块:例如解读css图片如何转换,压缩等等
module:{},
//插件:用于生产模板和各项功能
plugins:[],
//配置webpack开发服务的各项功能
devServer:{}
}
- 要是多入口，多出口配置的话(只需要改动两点就可以)
//入口配置项
entry:{
entry:"./src/enter.js",
entry2:"./src/enter2.js"
},
//出口文件配置项
output:{
path: path.join(__dirname,"/dist"),
filename:"[name].js"
},
这样生成的文件名就是对应的入门文件名
- 最后在直接执行
这样就直接打包了，工作用我们用这种
webpack
