废话不说直接正题
本篇中，加粗的为重点，其他是吐槽
下载安装就不说了
由于前面使用的时候用到了clean-webpack-plugin插件
配置文件如下
entry:{
app:'./aa.js'
},
output:{
filename:"[name].[hash:5].js",
path:__dirname+"/test",
publicPath:'/'
},
plugins:[
// html模板插件
new htmlwebpackPlugin({
filename:'index.html',
template:'index.html'
}),
// 清除之前打包的文件保留现在的打包文件
new CleanWebpackPlugin()
]
随后我再使用webpack-dev-server 插件
// 引入插件
let htmlwebpackPlugin = require("html-webpack-plugin")
// 省略中间过程
// 配置如下
devServer: {
// 设置端口
port:3000,
// 设置打开的首页
contentBase: '/index.html',
// 是否自动打开默认浏览器
open:true,
// 是否热更新
hot:true
}
解决办法
- 先得知道 webpack-dev-server 插件所重新打包的文件并不会存放在实际的物理磁盘当中，所以我们没有办法看到，它被存在电脑的内存中。
- webpack-dev-server 会监测文件是否变化，当监测到文件变化的时候 将会重新编译打包。这些变化的打包文件保存在内存中相对于publicPath的位置。另外，默认情况下，如果在磁盘目录下已经存在了相同访问位置的打包文件，会优先选择内存中的打包文件
- 放在内存中的原因（1.访问I/O操作耗时，2.便于开发环境下的实时热加载）。
- 解决
所以contenBase直接引用相对publicPath 的路径的文件就行，比如我这里直接引用的‘/index.html’
我当前的publicPath设置为当前路径 所以contentBase 会读取与node_modules src test 等文件夹同级的文件。
诶 你会发现 我这文件夹不是有一个index.html 吗？难道不是引用的它的吗?
no! no! no !
注意一下代码，我这儿是没有图片的
我引用出来的是经过打包的，并且打包了图片的
所以 ，如果在磁盘目录下已经存在了相同访问位置的打包文件，会优先选择内存中的打包文件
下面讲个故事
今天的坑 1：
我使用的时候 将 contentBase 的文件配置为了我的 path 路径（ contentBase: ‘/test/’）
结果是：我打包完了之后 生成了test这个文件夹，并且 它是有内容的
但是我走完起服务器的一步 这个文件夹神tm 清空了，找半天原因：是因为被clean-webpack-plugin 清除了，删除了那句话，结果服务器是成功了。但是多次打包的时候之前打包的文件都会存在。我服了。
今天的坑 2
说是坑，不算坑吧！
走了另一个方法也算是解决了这个问题
思路 就是：
在打包完了之后将打包后的文件复制到另外一个地方，contentBase引用的时候直接引用另外一个文件夹就搞定了。
简单的步骤：
- 安装复制插件 copy-webpack-plugin
cnpm i copy-webpack-plugin --save-dev
- 插件使用
// 1.引入插件
let CopyWebpackPlugin = require("copy-webpack-plugin ")
// 2.plugin 中使用
new CopyWebpackPlugin([
{
// 复制的文件路径
from:__dirname+"/test",
// 将test 文件复制到 dist
to: __dirname+"/dist",
// 全局忽略文件
ignor:[".*"]
}
])
- 更改 devServer
devServer: {
// 设置端口
port:3000,
// 设置打开的首页 默认为dist
contentBase: false,
// 设置资源文件路径
publicPath:'/',
// 是否自动打开默认浏览器
open:true,
// 是否热更新
hot:true
}
- 配置webpack.config.js文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 起服务器的时候要先打包才能从里面复制出文件
"start": "webpack --config webpack.config.js && webpack-dev-server",
"dev": "webpack --config webpack.config.js"
},
这是一个大大的 over
