废话不说直接正题
本篇中,加粗的为重点,其他是吐槽
下载安装就不说了
由于前面使用的时候用到了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"
},