webpack-dev-server file after the package cleared

Do not talk nonsense directly to the topic

This blog entry, bold for emphasis, others are Tucao

Download the installation will not say
because the time used previously used the clean-webpack-plugin plugin

Configuration files are as follows

    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()        
    ]

Then I re-use webpack-dev-server plug-ins

// 引入插件
let htmlwebpackPlugin = require("html-webpack-plugin")

// 省略中间过程

// 配置如下
 devServer: {
        // 设置端口
        port:3000,
        // 设置打开的首页
        contentBase: '/index.html',
        // 是否自动打开默认浏览器
        open:true,
        // 是否热更新
        hot:true
    }

Solution

1. Come to know webpack-dev-server plug-in to repackage the files are not stored in the actual physical disk which, so we can not see that it is stored on a computer's memory.
2. Whether webpack-dev-server will monitor file changes when the monitored file changes will be re-compiled packages. These changes are packaged files are saved in memory position relative to the publicPath. In addition, by default, if the package file in the disk directory to access the same location already exists, and will give priority to package files in memory
3. Cause in memory (1. Access I / O time-consuming operation, 2 live development environment under heat load) .
4. Solve
   it contenBase direct reference to the file path relative publicPath on the line , such as I have here a direct reference to the '/index.html'
   my current publicPath set the file to the current path so contentBase reads and node_modules src test and other folders at the same level.

Eh You will find that I have a index.html folder is not it? Is not cited it do?
NO! NO! NO!

Note the code, I have here is not a picture
I quote out is through packaged and packed the picture

so, if in the disk directory already exists with the same access packaged file location, will give priority to package files in memory

Here a story

Today's pit 1 :
I used to contentBase file configuration for my path path (contentBase: '/ test /' )
The result is : generated after I packed finished test this folder, and it is the content

, but I finish this step from the server folder God tm cleared, for a long time to find a reason: because they were cleared of clean-webpack-plugin, deleted that sentence, the result of the server is successful. But many times when the package files are packaged prior to exist. I had to.

Today's 2 pit
, said pit, the pit is not it!
Another way to go to solve this problem can be considered
the idea is this:
Copy the file after packing finished package to another place, when contentBase cited direct reference to another file folder to get .

Simple steps:

1. Copy the plug-in installed copy-webpack-plugin

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

2. Plug-in uses

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

3. Change devServer

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

4. Webpack.config.js configuration file

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 起服务器的时候要先打包才能从里面复制出文件
    "start": "webpack --config webpack.config.js && webpack-dev-server",
    "dev": "webpack --config webpack.config.js"
  },

This is a big over