webpack-dev-server 清除打包后的文件

废话不说直接正题

本篇中，加粗的为重点，其他是吐槽

下载安装就不说了 由于前面使用的时候用到了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
    }

解决办法

1. 先得知道 webpack-dev-server 插件所重新打包的文件并不会存放在实际的物理磁盘当中，所以我们没有办法看到，它被存在电脑的内存中。
2. webpack-dev-server 会监测文件是否变化，当监测到文件变化的时候 将会重新编译打包。这些变化的打包文件保存在内存中相对于publicPath的位置。另外，默认情况下，如果在磁盘目录下已经存在了相同访问位置的打包文件，会优先选择内存中的打包文件
3. 放在内存中的原因（1.访问I/O操作耗时，2.便于开发环境下的实时热加载）。
4. 解决 所以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引用的时候直接引用另外一个文件夹就搞定了。

简单的步骤：

1. 安装复制插件 copy-webpack-plugin

cnpm i copy-webpack-plugin --save-dev

2. 插件使用

// 1.引入插件
let CopyWebpackPlugin = require("copy-webpack-plugin ") 
// 2.plugin 中使用
new CopyWebpackPlugin([
	{
          
   
		// 复制的文件路径
		from:__dirname+"/test",
		// 将test 文件复制到 dist
		to: __dirname+"/dist",
		// 全局忽略文件
		ignor:[".*"]
	}
])

3. 更改 devServer

devServer: {
          
   
        // 设置端口
        port:3000,
        // 设置打开的首页 默认为dist
        contentBase: false,
        // 设置资源文件路径
        publicPath:/,
        // 是否自动打开默认浏览器
        open:true,
        // 是否热更新
        hot:true
    }

4. 配置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