webpack4.x 如何配置webpack4.x 删除指定目录、配置devServer开发服务器、热更新等第四节

冷不防 2022-05-28 12:40 291阅读 0赞

**如何每次生成dist目录前先删除dist目录**

有朋友反映每次手动删除dist目录太麻烦了,能不能使用命令删除呢？答案是有的.

我们需要再安装一个模块 **clean-webpack-plugin**,用来删除某些东西(清除)

**1.安装clean-webpack-plugin**

cnpm i clean-webpack-plugin -D

**2.在webpack.config.js中引入**

const CleanWebpackPlugin = require('clean-webpack-plugin');

**3.在plugins中配置**

//webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry:{ index: './src/index.js', index2: './src/index2.js' }, output:{ path:path.resolve(__dirname,'dist'), //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面 //打出来是index-bundle.js //和index2-bundle.js filename:'[name]-bundle.js' }, plugins:[ new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 new HtmlWebpackPlugin({ chunks:['index'], filename:'index.html', minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }, hash:true, title:'I love China', template: './src/index.html' //模板地址 }) ] }

--------------------

**devServer:如何配置开发环境服务器**

作用:

自动拉起浏览器,配置端口等,代码改变自动刷新

1.安装webpack-dev-server

cnpm i webpack-dev-server -D

2.使用,插件需要引入,这个不需要引入,直接用就可以了

3.配置package.json,在script中增加"dev": "webpack-dev-server --mode development"

{ "name": "webpack4", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "build": "webpack --mode development", "dev": "webpack-dev-server --mode development" }, "author": "", "license": "ISC", "devDependencies": { "clean-webpack-plugin": "^0.1.19", "html-webpack-plugin": "^3.2.0", "webpack": "^4.1.0", "webpack-cli": "^2.0.14", "webpack-dev-server": "^3.1.1" } }

这时运行 **npm run dev,**就可以了

--------------------

**如何配置热更新**

1.在webpack.config.js中引入webpack

const Webpack = require('webpack');

2.在webpack.config.js的**devServer**中增加一个**hot:true**配置

devServer:{ // 设置服务器访问的基本目录 contentBase:path.resolve(__dirname,'dist'), //最好设置成绝对路径 // 设置服务器的ip地址,可以是localhost host:'localhost', // 设置端口 port:8090, // 设置自动拉起浏览器 open:true, // 设置热更新 hot:true },

3.在**plugins**中配置new Webpack.HotModuleReplacementPlugin(),