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

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

冷不防 2022-05-28 12:40 358阅读 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.使用,插件需要引入,这个不需要引入,直接用就可以了

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' }, devServer:{ // 设置服务器访问的基本目录 contentBase:path.resolve(__dirname,'dist'), //最好设置成绝对路径 // 设置服务器的ip地址,可以是localhost host:'localhost', // 设置端口 port:8090, // 设置自动拉起浏览器 open:true }, plugins:[ new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 new HtmlWebpackPlugin({ chunks:['index'], filename:'index.html', minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }, hash:true, title:'I love China', template: './src/index.html' //模板地址 }) ] }

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

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const Webpack = require('webpack'); 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' }, devServer:{ // 设置服务器访问的基本目录 contentBase:path.resolve(__dirname,'dist'), //最好设置成绝对路径 // 设置服务器的ip地址,可以是localhost host:'localhost', // 设置端口 port:8090, // 设置自动拉起浏览器 open:true, // 设置热更新 hot:true }, plugins:[ new Webpack.HotModuleReplacementPlugin(), //调用webpack的热更新插件 new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 new HtmlWebpackPlugin({ chunks:['index'], filename:'index.html', minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }, hash:true, title:'I love China', template: './src/index.html' //模板地址 }) ] }