在Webpack5中,mode(模式)
有三种:
development(开发环境模式)
production(生产环境模式)
none或' '(空)
在不同模式中,我们可能对于webpack.config.js
配置文件进行不同参数的设置
比如,在development开发环境
中,我们可能使用devTool
,devServer
等对webpack打包后的代码进行浏览器调试;在production生产环境
中,我们可能在optimization
配置下面的minimizer
中使用CssMinimizerPlugin
进行Css代码压缩,在performance
配置下面使用hints
解决打包时性能方面超出的提示
1、webpack-dev-server
webpack-dev-server
提供了一个基本的 web server,并且具有 live reloading(实时重新加载)
的功能。
首先,我们安装webpack-dev-server
npm install webpack-dev-server --save-dev
或
npm install webpack-dev-server -D
1.1、devServer的基础配置
接着,我们在目录下创建相关文件
hello.js
function hello(){
console.log("hello")
}
export default hello
index.js
import hello from './hello'
hello()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你是——YYDS</title>
</head>
<body>
</body>
</html>
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : './src/index.js',
output : {
/* 指定输出文件的文件名称 */
filename:'bundle.js',
/* path必须使用绝对路径 */
/* 指定输出文件的路径 */
path:path.resolve(__dirname,'./dist')
clean:true
},
mode : 'development',
/* development环境通过控制台定位代码执行在具体哪一行 */
devtool:'inline-source-map',
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',
filename:'app.html',
inject:"body"
})
],
devServer:{
static:'./dist'
},
}
可以看出,在webpack.config.js
中配置devServer
的static
参数
devServer:{
static:'./dist'
},
static:'./dist'
表示devServer
将当前指向的物理路径设置成dist文件
,作为我们server的根目录
打包:
npx webpack
启动webpack-dev-server
:
npx webpack-dev-server
打开http://localhost:8080/
,我们发现在控制台中成功打印了hello
, 同时开启了Hot Module Replacement enabled
和 Live Reloading enabled
当我们将我们的hello.js中hello
改为hello world
,保存后,浏览器控制台会同步更新
1.2、webpack-dev-server的真相
事实上,webpack-dev-server
并没有真正
输出任何物理文件,它只是将我们打包后的bundle文件存放到了内存
中。
为了测试,我们将刚才通过npx webpack
打包后的dist文件夹整个删除
然后我们重新刷新浏览器,发现浏览器控制台仍然打印了hello world
如果你还有疑问,我们接着测试,我们ctrl + c
先关闭当前webpack-dev-server
,再重新启动webpack-dev-server
,同时我们将hello world
改为hello world !!
,然后我们重新刷新浏览器,发现浏览器控制台仍然打印了hello world !!