when using webpack4, the clean-webpack-plugin plug-in is used. Normally, use the webpack command to package. The configuration file is as follows:
const ExtractTextPlugin=require("extract-text-webpack-plugin");
const webpack=require("webpack");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const CleanWebpackPlugin=require("clean-webpack-plugin");
const config={
entry:{
app:__dirname+"/src/app.js",
main:__dirname+"/src/index.js"
},
output:{
filename:"[name]-[hash].js",
path:__dirname+"/dist"
},
mode:"development",
devtool:"source-map",//source map
devServer:{//webpack
contentBase:"./dist",//webpack-dev-server
port:"8383",//
inline:true,//true
historyApiFallback:true,//HTML5 history APItrueindex.html
hot:true//
},
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({ //lesscss
fallback:"style-loader",
use:[
{loader:"css-loader",
options:{
modules:true, //css modules
localIdentName:"[name]__[local]--[hash]"// css
}
},
{loader:"postcss-loader"}
]
})
},
{
test:/\.js$/,
use:{
loader:"babel-loader",
options:{
presets:["env"]
}
},
exclude:/node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin("dist/*.*", {
root: __dirname,
verbose: true,
dry: false
})
]
};
module.exports=config;
at this time, due to the role of clean-webpack-plugin, the previous files will be cleared before packaging, and a new file with a hash value will be generated, as shown in the following figure
.
webpackserverwebpack-dev-server --inline --hot
, why is that? How can I see it?