八、清理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')}};
就酱@_@
- Barra模型因子的构建及应用系列七之Liquidity因子
- 上 构建Lua解释器Part7:构建完整的语法分析器
- R语言基本绘图参数
- 有效拜访的两个基本条件
- 用户权限-Linux系统基本权限
- webpack 从入门到放弃!
- 中考暂停使用计算机,初中生停止发育的4个信号,如果全中招,基本与大长腿无缘了
- 企业无故不缴纳基本养老保险费的应如何处理
- 详细 webpack
- 一 构建SpringCloud 项目初始环境