webpack定制化 高级配置[热更新、热打包、别名、调试]
前提:
webpack5及其对应配套内容
node16.13.2
本文作用在webpack.config.js
一、高级配置
1.webpack-dev-server
解释:功能有热更新(把内容先打包到内存,速度快,但不会写到本地文件),这里还会额外介绍如何实时打包到文件而不是内容
安装:npm i webpack-dev-server -D #本文版本4.10.1其需要与webpack版本相匹配对应
注意:需要提前安装html-webpack-plugin插件,当热更新打包开始后,默认打开public文件夹(这里面需要放着模板[html-webpack-plugin来这里调用])
成功标志:开发者工作里面打印出[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
表示启动热更新服务器成功
-
热更新:
BUG说明:①在pageage.json里面output路径要保持默认或path: path.resolve(__dirname, './dist')
,不然就会无法运行服务器热更新;②webpack默认支持打包img的时候不要设置路径使用默认的,不然会出错;③插件MiniCssExtractPlugin不能用于热更新需要style-loader
webpack.config.jsmodule.exports = { // 其他省略.... // 配置 webpack-dev-server的选项 devServer: { host: '127.0.0.1', // 配置启动ip地址 port: 5002, // 配置端口 open: false// 配置是否自动打开浏览器 // static:'./public' //可以更改服务器打开的文件(需要是上面提到插件打开的路径) } }
package.json
// scripts里面加入下面的第二行“start”这个 "scripts": { "start": "webpack serve" },
-
实时打包到文件:
解释:其可以在文件修改后,实时打包修改到文件而不是写入内存,这种模式很适合前后端半分离开发。如一个html一部分需要后端模板,一部分需要vue。这样的方式及其方便测试。
配置:package.json
// scripts里面加入下面的第二行“watch”这个 "scripts": { "watch": "webpack --watch" },
2.起别名
解释:有时文件路径层次多深很多,引用起来会看起来很麻烦,如../../../public
配置:
const path = require('path')
module.exports = {
// 之前的配置
resolve: {
// 路径别名
alias: {
'@': path.resolve('./src'),
'@co':path.resolve(__dirname,'src/components')
},
// 引入文件时省略后缀
extensions: ['.js', '.ts', '.less', '.vue'],
},
}
使用:import '@/css/loser.css'
3.source-map
解释:众所周知,前端项目可以在开发者工具当中源代码进行调试,但是webpack使用的js经过压缩转换,难以打包调试,这时就需要该内容
-
eval-cheap-module-source-map
解释:能具体定位到源码位置和源码展示,适合开发模式,体积较小配置:
// 与input、output同级 devtool: 'eval-cheap-module-source-map',
-
nosources-source-map
解释:只能定位源码位置,不能源码展示,体积较小,适合生产模式
配置:// 与input、output同级 devtool: 'nosources-source-map',
结语:请把本系列都看完再投入开发环境,优化配置很重要
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbfagb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01