1、自动清除输出目录文件插件 clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module:{
plugins:[
//clean-webpack-plugin
new CleanWebpackPlugin();
]
}
2、自动生成html插件 html-webpack-plugin
output里不再需要配置publicPath
const HtmlWepackPlugin=require('html-webpack-plugin')
output:{//输出文件的路径 页面引入的是patn/filename
filename:'bundle.js', //输出文件的名称
path:path.join(__dirname,'dist'),//输出目录 必须是绝对路径
//publicPath:'dist/' //所有资源的基础路径是指项目中引用css,js,img等资源时候的一个基础路径
},
plugins里配置
plugins:[
new HtmlWebpackPlugin({
title:'wepack plugin sample', //生成的html页面标题
meta:{ //设置页面meta
viewport:'width=device-width'
},
//根据html模板生成html页面
//根据<%= htmlwebpackPlugin.options.title %>
template:’./src/index.html‘
})
]
同时输出多个html页面
//用于生成其他页面 例about.html
new HtmlWebpackPlugin({
filename:'about.html'
})
3、静态资源打包插件 copy-webpack-plugin
开发阶段不使用此插件 一般上线前最后一次打包使用
new CopyWebpackPlugin([
'public' //将public目录下的所有文件copy到输出目录中
])
4、webpack dev server 自动编译和自动刷新浏览器
webpack --watch 和 browaerSync 也可以实现
-
安装 yarn add webpack-dev-server --dev
-
运行 yarn webpack-dev-server
为了提高工作效率,将打包结果暂时存放内存中,http server从内存中读取,减少不必要的磁盘读写 -
yarn webpack-dev-server --open自动打开浏览器
5、webpack dev server静态资源访问
copy-webpack-plugin上线前使用
开发阶段使用webpack-dev-server
devServer:{ //静态资源访问
contentBase:'./public' //也可以是数组,多个路径
},
6、webpack-dev-server 代理API
解决开发环境中接口跨域请求问题 webpack-dev-serve支持代理服务 将api代理到开发服务器
以请求github/user接口为例:
devServer:{ //静态资源访问
contentBase:'./public', //也可以是数组,多个路径
proxy:{
'/api':{//被代理的请求路径前缀 请求以‘/api’开头的地址 代理到接口中
//http://localhost:8080/api/users -> http://api.github.com/api/users
target:'https://api.github.com',//代理目标
pathRewrite:{
//路径中以/api开头替换为空
//http://localhost:8080/api/users -> http://api.github.com/users
'^/api':''
},
//不能使用localhost:8080作为请求github的主机名
changeOrigin:true
}
}
},
webpack自动刷新问题
使用webpack-dev-server修改代码后,自动刷新导致页面状态丢失,为了提高开发效率在页面不刷新的前提下,模块也可以及时更新 ,
可以使用 HMR ( hot module replacement ) 模块热更新
只将修改的模块实时替换到应用中 不必完全刷新应用
webpack 使用HMR
1、通过命令行使用 yarn webpack-dev-server --hot
2、通过配置文件开启
const webpack = require('webpack')
devServer: {
hot: true
// hotOnly: true // 只使用 HMR,热替换失败不会自动刷新
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
1. hot: true
单纯设置为true的时候,如果编译报错,会抛出错误,你重新改成正确的,这个时候又会触发重新编译,整个浏览器会重新刷新!
2. hotOnly: true
这个也设置的话,如果编译报错,你再改成正确的,重新编译,浏览器不会刷新!
hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下,前者会自动刷新页面,后者不会刷新页面,而是在控制台输出热更新失败
webpack中的HRM样式文件的热更新可以开箱即用,其他模块需要手动处理模块热替换逻辑
为什么样式文件的热更新开箱即用呢?因为经过style-loader自动处理了热更新
另外vue-cli这种框架下的开发,脚手架创建的项目内部都集成了HMR的方法,所以也不用做处理。
HRM API 通过HRM API的使用手动处理模块更新后的热替换
if (module.hot) {
let lastEditor = editor
module.hot.accept('./editor', () => { //第一个参数是依赖模块的路径
//第二个参数是依赖模块更新后的处理函数
})
}