创建配置文件webpack.config.js
在根目录在手动创建webpack.config.js,配置基本模板
module.exports ={
entry:{},
output:{},
module:{},
plugins:[],
devServer:{}
}
- entry:配置入口文件的地址,可以是单一入口,也可以是多入口;
- output:配置出口文件的地址,支持多出口配置;
- module:配置模块,主要解析CSS和图片转换压缩等功能;
- plugins:配置插件;
- devServer:配置开发服务功能;
entry选项配置
这个选项配置我们要压缩的文件一般是javascript。
entry:{
entry:'./src/entery.js'
}
output选择配置
出口配置用来告诉webpack最后打包文件的地址和文件名称;
output:{
//打包后的文件路径
path: path.resolve(__dirname,'dist'),
//打包后的文件名称
filename:'bundle.js'
}
当然还要引入path模块,这个是nodejs自带的模块;在webpack.config.js文件的头部引入;
const path = require('path');
现在的代码结构:
const path = require('path');
module.exports={
//入口文件的配置项
entry:{
entry:'./src/entry.js'
},
//出口文件的配置项
output:{
//输出的路径,用了Node语法
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:{}
}
将filename的值修改为[name].js;它的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个出口文件;
服务和热更新配置
首先,配置devServer
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,
port:1608
}
- contentBase:服务器基本运行路径
- host:服务器运行地址
- compress:服务器压缩式,一般为true
- port:服务运行端口
然后,下载webpack-dev-server模块,
npm install webpack-dev-server --save-dev
最后,配置package.json里的scripts选项
"scripts": {
"server": "webpack-dev-server"
}
运行命令 npm run server ,服务器运行,在浏览器中打开http://localhost:1608,既可以看到页面;
当 npm run server 启动后,服务器有一种监控机制(watch),可以实现热更新;
参考地址:
- https://github.com/zhuangZhou/webpack_demo
- http://jspang.com/2017/09/16/webpack3-2/#15webpackbabel