3.2.1 webpack-dev-server的使用
1、什么是webpack-dev-server
项目最终要打包上线，所以最好能模拟线上环境进行开发调试，，即开始服务
webpack-dev-server就是一个让我们可以模拟线上环境进行项目调试的工具
2、webpack-dev-server提供的额外常用功能
1）路径重定向
把找不到的路径重新定向，防止出现找不到文件的错误
2）浏览器中显示编译错误
3）接口代理
解决跨域问题
4）热更新
不刷新浏览器的情况下，对代码进行更新
3、webpack-dev-server使用步骤
安装 webpack-dev-server --> 配置devServer字段 --> 利用命令行开启服务
webpack.config.jsdevServer: {
port: 9001,
},package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},4、devServer常用配置
1）inline：状态 服务的开始模式 浏览器上多了个状态条
2）lazy：懒加载 多入口，如果不配置，会对所有入口进行编译，如果配置lazy，则只有当访问该入口时，才会对该入口进行编译，从而提高打包和编译的速度
3）port：配置端口
4）overlay：错误遮罩 通常，错误会显示在控制台，开启overlay之后，错误会显示在页面的一个遮罩中
5）historyApiFallback：路径重定向 做404效果
简单配置为 historyApiFallback: true ,,,则输入 错误路径，页面不会发生跳转，也不会出现报错
historyApiFallback: {
rewrites: [ //可以是一个或多个
{
from: /^\/([ -~]+)/,
to: function(context){ //context为上面正则匹配到的内容
return ‘./‘ + context.match[1] + ‘.html‘
}
}
]
}6）proxy：代理请求 跨域把客户端请求转化为webpack-dev-server，也就是用webpack-dev-server代理我们的请求，通过webpack-dev-server转发，从而解决跨域的问题
proxy: {
‘/‘: { // ‘/‘属性名表示碰到以‘/‘开头的地址，就进行代理转发
target: ‘‘, // target表示把请求转发到哪个地址去
changeOrigin: true, // changeOrigin 改变请求origin的作用
pathRewrite: { // 接口名较长进行简化
‘^comments‘: ‘/api/comments‘
},
headers: { // 要被代理的请求上加的请求头
}
}，
‘/api‘: { //想配置多个匹配规则就增加配置即可
}
}7）hot：热更新 无刷新的更新页面代码
devServer: {
hot: true,
hotOnly: true, //只使用热更新，不适用浏览器刷新
}5、source-map
为方便调试，我们需要知道打包后的代码对于原文件的位置
1）如果代码有一处错误，无source-map只能追踪到错误发生在打包后文件的哪个位置，但是打包后的文件不方便阅读
2）有了source-map，就可以查看错误发生在原模块的哪个地方
devtool: ‘eval-source-map‘,
cource-map的模式
开发模式 eval eval-source-map cheap-eval-source-map cheap-module-source-map
生产模式 source-map hidden-source-map nosource-source-map
// 终极配置
const webpack = require(‘webpack‘)
const extractTextCss = require(‘extract-text-webpack-plugin‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports={
mode:‘production‘,
entry:{
app:‘./src/app.js‘,
},
output:{
path:__dirname+"/dist",
filename:‘[name].bundle.js‘
},
module:{
rules:[
{
test:/\.less$/,
use:extractTextCss.extract({
fallback:{
loader:‘style-loader‘,
options:{
//insertInto:"#mydiv",
singleton:true,
//transform:"./transform.js"
}
},
use:[
{
loader:‘css-loader‘,
options:{
modules:{
localIdentName:‘[path][name]_[local]_[hash:4]‘
}
}
},
{
loader:‘less-loader‘
}
]
})
}
]
},
devtool: ‘eval-source-map‘,
devServer: {
port: 9001,
inline: false,
hot: true,
hotOnly: true,
overlay: true,
historyApiFallback: {
rewrites: [ //可以是一个或多个
{
from: /^\/([ -~]+)/,
to: function(context){ //context为上面正则匹配到的内容
return ‘./‘ + context.match[1] + ‘.html‘
}
}
]
},
proxy: {
‘/smartSpec‘: { // ‘/‘属性名表示碰到以‘/‘开头的地址，就进行代理转发
target: ‘https://mooc.study.163.com/‘, // target表示把请求转发到哪个地址去
changeOrigin: true, // changeOrigin 改变请求origin的作用
pathRewrite: { // 接口名较长进行简化
"^/smartSpec/qd":"/smartSpec/detail/1202816603.htm"
},
headers: { // 要被代理的请求上加的请求头
}
},
}
},
plugins: [
new HtmlWebpackPlugin({
filename: ‘index.html‘,
template: ‘./src/index.html‘,
minify: {
collapseWhitespace: true
},
inject:true,
}),
new extractTextCss({
filename:"app.bundle.css",
disable:true
}),
]
}