Webpack基本构建( 二 ) _css

八、清理dist文件夹 clean--
由于过去的代码会遗留在dist中，导致dist目录非常混乱，无法追踪到哪些文件是实际在项目中用到的。因此推荐在每次构建前清理dist文件夹，把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的，如此便只会生成用到的文件，下面的插件可以实现这个功能：
npm i clean-- --save-dev
最新版的中 new ()；中不需要写里面的目标路径，会自动清除生成的文件夹，比如是build文件夹。
九、开发服务器，的热更新 : 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器…）
每次修改代码之后都要重新打包一次再运行，非常麻烦，可以使程序修改后浏览器自动刷新，不用再重新输入命令打包，还可以自动打开浏览器。
..js配置
// 开发服务器：devServer特点：只会在内存中编译打包，不会有任何输出// 启动devServer指令：npx webpack serve （webpack5之后）devServer: {contentBase: resolve(__dirname, 'build'),// 项目构建后的路径compress: true,// 启动gzip压缩port: 3000,// 端口号open: true // 自动打开浏览器（默认）},
的热更新
模块热更新（热替换），其目的是为了加快用户的开发速度，提高编程体验。它并不适用于生产环境，这意味着它应当只能在开发环境中使用。
模块热替换（HMR - Hot）
它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面：
..js 文件的配置引入库使用new .()设置选项中的hot字段为true
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');// 清除文件const webpack = require('webpack');module.exports = {entry: {app: './src/index.js'},devtool: 'inline-source-map',devServer: {contentBase: './dist',hot: true},plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Hot Module Replacement'}),new webpack.HotModuleReplacementPlugin()],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};
就酱@_@