webpack 从零开始（下

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