前提:
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',

结语:请把本系列都看完再投入开发环境,优化配置很重要
本文详细介绍了Webpack 5的高级配置,包括webpack-dev-server的热更新功能、路径别名设置以及source-maps的不同类型应用。适合前端开发者优化开发流程。
2724

被折叠的 条评论
为什么被折叠?



