webpack 从零开始(下
简介: 本文主要讲述 HMR (模块热替换)、懒加载,还有搭建vue 开发环境
上文: webpck从零开始(中
八 、HMR模块热替换
使用HMR 提高生产效率 从 webpack-dev-server v4.0.0 开始,热模块替换是默认开启的。
检查一下 俺们的版本是 4.110,那就关了试试
修改devServer:
devServer: {
...
hot: true
}
npm run serve
修改 index.css
div{
..
width: 200px;
height: 200px;
}
发生了编译 浏览器刷新了。。。删掉
div{
...
}
出了一个bug,css样式不能加载
Refused to apply style from 'http://localhost:8080/index.30f269.css?1663006881954' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
关了热替换
hot: false
好像没事了 哈哈哈。。。检查了一下 link 加载路径 多了 localhost:8080
暂时没找到bug的原因 先这样吧
九、生产环境
在生产环境和开发环境,不同的构建目标存在巨大差异,由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。
webpack-merge
使用此工具合并“common” 配置
cnpm install --save-dev webpack-merge
修改文件
新建 webpack.dev.js
webpack.prod.js
webpack.common.js
从原配置文件粘贴代码到webpack.common.js并进行修改
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const Htm