1、webpack打包前清除上次打包文件
安装: cnpm install clean-webpack-plugin -D
配置文件中插件引入: const { CleanWebpackPlugin } = require('clean-webpack-plugin')
插件配置:
plugins: [
.....
// 打包之前,先删除历史文件
new CleanWebpackPlugin()
.....
]
2、资源模块
资源模块是一种模块类型,它允许使用资源文件,无需配置额外的loader
-
资源文件:字体,图片,图标,HTML…
-
无需使用file-loader、url-loader也能加载图片和字体
{
test: /\.(png|gif|jpe?g)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
// 指定图片大小,小于该数值的图片,会被转成base64
maxSize: 8* 1024
}
},
generator: {
// name是图片原来的名称,ext是图片原来的后缀名,ext本身自己带`.`
filename: 'image/[name][ext]'
}
}
3、webpack-dev-serve
- 作用:发布web服务,提高开发效率。默认把内容打包到内存里
- 安装:
cnpm install -D webpack-dev-server
配置devServe选项,注意之前的contentBase已经更新为static属性
// 开发服务器
devServer: {
// 指定加载内容的路径
static: {
directory: path.resolve(__dirname, 'dist1')
},
// 启用gzip压缩
compress: true,
// 指定端口号
port: 9200,
// 启用自动更新,(禁用hot)
liveReload: true
},
配置package.json
"scripts": {
"dev": "webpack serve --mode development"
},
执行:npm run dev
即可
4、proxy(配置接口代理)
解决webpck-dev-server
下,访问接口的跨域问题,
// 开发服务器
devServer: {
// 指定加载内容的路径
static: {
directory: path.resolve(__dirname, 'dist1')
},
// 启用gzip压缩
compress: true,
// 指定端口号
port: 9200,
// 启用自动更新,(禁用hot)
liveReload: true,
// 配置代理,解决接口跨域问题
proxy: {
"/api": {
// http://localhost:9200/api ----> https://api.github.com/api
target: 'https://api.github.com',
// http://localhost:9200/api ----> https://api.github.com/
pathRewrite: {
'^/api': ''
},
changeOrigin: true
}
}
测试:浏览器访问 http://localhost:9200/api/users