如何每次生成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' //模板地址
})
]
}
