webpack 3.X学习之基本配置
创建配置文件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），可以实现热更新；
参考地址：
