一、webpack-dev-server
1、安装
cnpm install webpack-dev-server -D
2、作用
开启一个web服务，监听文件的变化并自动刷新网页，做到实时预览。支持 Source Map，以方便调试
3、基本使用
devServer:{
contentBase:path.join(__dirname,"dist"),
host:"127.0.0.1"
open:true,
proxy:{
"/api":{
target:"http://www.baidu.com",
changeOrigin:true
}
},
prot:8080
}
contentBase:本地服务器加载页面的目录
host:指定使用的主机地址
hot:热模块替换
hotOnly:在没有页面刷新的情况下启用热模块替换
open:告诉dev-server在服务器启动后打开浏览器。将其设置true为打开默认浏览器。
proxy:代理 服务器代理跨域
prot:设置端口号
二、热模块更新 (Hot Module Replacement)
1、作用
假设当我们的模块样式发生改变的时候只需要更新css即可，不需要将整个页面进行重新加载。方便用于调试css
2、基本使用
constwebpack=require("webpack");
module.exports ={
devServer:{
contentBase:"./dist",
open:true,
port:8080,
hot:true,//开启Hot Module Replacement
hotOnly:true
},
plugins:[
newwebpack.HotModuleReplacementPlugin()//webpack自带的插件
]
}
三、sourceMap配置(问题)
sourceMap是一个映射关系，它会将我们打包后的文件出错的部分对应打包前文件出错的部分，这样对于我们的代码调试是非常方便的
sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术
注意如果配置了sourceMap后打包的速度回变慢
module.exports={
devtool:"none"//关闭
devtool:"source-map"
devtool:"inline-source-map"//会将映射的文件已字符串的形式放入打包文件中
}
module.exports={
devtool:"cheap-module-eval-source-map",//dev环境
devtool:"cheap-module-source-map",//线上环境
}
inline:会将映射的文件已 字符串的形式放入打包文件中去
cheap:只会负责业务代码中的错误，不会负责node_modules中的错误
module:可以让source负责node_modules中的错误
四、resolve
Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。Webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默认的规则
alias
配置项通过别名来把原导入路径映射成一个新的导入路径
resolve:{
alias:{
components: path.join(__dirname,'./src/components/')
}
}
extensions
在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是
['.js', '.json']也就是说当遇到
require('./data')这样的导入语句时，Webpack 会先去寻找./data.js文件，如果该文件不存在就去寻找./data.json文件， 如果还是找不到就报错
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
五、webpack-merge
分离配置文件
我们在根目录下创建config文件夹，并创建四个配置文件：
webpack.comm.js 公共环境的配置文件
webpack.development.js 开发环境下的配置文件
webpack.production.js 生产环境下的配置文件
webpack.parts.js 各个配置零件的配置文件
如果配置文件被分成了许多不同的部分，那么必须以某种方式来组合他们，通常就是合并数组和对象，webpack-merge很好的做到了这一点。
webpack-merge做了两件事：它允许连接数组并合并对象，而不是覆盖组合
安装
cnpminstallwebpack-merge--save-dev
设置各个配置文件的连接
constbaseWebpackConfig=requie("./config/base.config.js");
constwebpackMerge=require('webpack-merge');
constwebpackConfig=webpackMerge(baseWebpackConfig, {
})
module.exports=webpackConfig