大家可以先去看我的前两篇文章，顺便可以点个三连哦，嚯嚯嚯～
目录
3. 方式二 ：wabpack-dev-server ( 常用 )
二、devServer 配置 DevServer | webpack
一、开启本地服务器
1. 理由
之前开发的代码，为了运行需要两个步骤
- 操作一：npm run build，编译相关的代码
- 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果
这样效率太慢了，所以希望当文件变化时，可以自动完成编译和展示
为了完成自动编译，webpack提供了几种可选的方式
- webpack watch mode
- webpack-dev-server（常用）
- webpack-dev-middleware
2. 方式一 ：wabpack watch
在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码会被重新编译，我们不需要手动去运行npm run build
ps : 这种方式事实上本身是没有自动刷新浏览器功能的（之前是因为有live-server）
开启watch也有两种方式
- 在导出的配置中，添加 watch : true
- 在package.json中，把以前写的那个打包的命令后加上 -- watch
这样后是不是发现下方变成了这样 ，两种方式用一个即可
3. 方式二 ：wabpack-dev-server ( 常用 )
wabpack-dev-server => 具备自动打包和实现监听功能
ps : 运行后并不会生成本地的文件，打包到了内存里，没有输出出来，这是为了提高效率
1. 安装webpack-dev-server
npm install webpack-dev-server -D2. 在package.json中配置
3. 使用npm run serve !!!!!!
4. 现在能实时更新了
最后开发完成后，再自己npm run build一下生成打包文件即可
二、devServer 配置 DevServer | webpack
1. static/directory :
-
浏览器请求打包后的资源，如果没有请求到，会自动去这个文件夹进行查找（也就是说没有打包的资源，如果放到这个文件夹里，也能进行访问）
-
可以进行动态配置，因为开发阶段时如果我们也在使用CopyWebpackPlugin插件，每次运行的效率就会比较低，所以开发阶段我们可以关闭CopyWebpackPlugin直接使用这个
-
生产阶段的时候在打开CopyWebpackPlugin （这就涉及到动态配置了，可以使用）
-
总而言之 开发阶段：使用这个 ｜ 生产阶段：CopyWebpackPlugin
devServer: {
static: {
// 指定路径
directory: path.join(__dirname, 'public')
}
}2. HMR : 模块热替换 ( 重要 )
- HMR => Hot Module Replacement，模块热替换
- 指在应用程序运行过程中，替换、添加、删除模块，而无需刷新整个页面
- 好处一 : 不重新加载整个页面，可以保留某些应用程序状态不丢失
- 好处二 : 只更新需要变化的内容，节省开发的时间
原理（理解即可）
- webpack-dev-server会创建两个服务：提供静态资源的服务(express)和socket服务(net.socket)
- express server扶着直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)
- HTM Socket Server ,是一个socket的长链接
- 当服务器监听到对应的模块发生改变时，会生成两个.json文件
- 通过长链接，直接将这两个文件发送给客户端（浏览器）
- 浏览器拿到文件后，加载这两个文件，针对修改的模块进行更新
webpack-dev-serve已经支持了HMR，我们只需要开启即可
如果不开启，当我们修改代码后，整个页面会自动刷新，使用的是live-reloading
tip : 最好同时使用target配置
// 配置服务
devServer: {
static: {
// 指定路径
directory: path.join(__dirname, 'public')
},
// 模块热替换
hot: true,
},其实这样配置后，hot还是不生效，页面还是会刷新～，是因为引入的方式还要改，可恶
因为需要去指定哪些模块发生更新时，进行HMR
但是我们真实开发是不需要这样的，使用vue，react框架的时候，vue-loader等会自动支持hot，不需要我们自己来写，所以，我们只需要了解一下即可
3. port
port设置监听的端口，默认情况下是8080
// 配置服务
devServer: {
static: {
// 指定路径
directory: path.join(__dirname, 'public')
},
// 模块热替换
hot: true,
// 设置端口号
port: 9000,
},
4. open
open是否打开浏览器 => 默认值是false，设置为true会打开浏览器
// 配置服务
devServer: {
static: {
// 指定路径
directory: path.join(__dirname, 'public')
},
// 模块热替换
hot: true,
// 设置端口号
port: 9000,
// 是否自动打开浏览器
open: true
},5. compress
compress是否为静态文件开启gzip compression => 默认值是false
// 配置服务
devServer: {
static: {
// 指定路径
directory: path.join(__dirname, 'public')
},
// 模块热替换
hot: true,
// 设置端口号
port: 9000,
// 是否自动打开浏览器
open: true,
// 启动gzip压缩
compress: true,
},6. host
host设置主机地址 :
- 默认值是localhost
- 如果希望其他地方也可以访问，可以设置为 0.0.0.0
localhost 和 0.0.0.0 的区别 :
- localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1
- 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收
- 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层
- 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的
- 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的
- 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序
- 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的
devServer: {
// 模块热替换
hot: true,
// 设置端口号
port: 9000,
// 是否自动打开浏览器
open: true,
// 启动gzip压缩
compress: true,
// host配置
host: '0.0.0.0'
},7. proxy配置
// 配置服务
devServer: {
static: {
// 指定路径
directory: path.join(__dirname, 'public')
},
// 模块热替换
hot: true,
// 启动gzip压缩,传输速率会变快
compress: true,
// 自动打开浏览器
open: true,
// 设置主机地址，默认是localhost，如果希望其他地方也可以访问，可以设置为 '0.0.0.0'
// 其他地方访问：通过你电脑的ip地址加上端口来访问的
// host: '0.0.0.0',
// 设置端口号
port: 9000,
// 配置代理，解决代理问题
proxy: {
// 当遇到'/api'的时候
'/api': {
// 将目前的地址代理至target
target: 'http://localhost:8888',
// 将'/api' 重写为''
pathRewrite: {
'^/api': ''
},
// 设置允许访问https的服务器
secure: false,
// 在某些情况下会很有用
changeOrigin: true
}
},
// 设置为true时，路由跳转如果返回了404错误，会自动返回index.html的内容
historyApiFallback: true
// 也可以设置成一个对象，根据from来匹配路径，决定跳转到哪个页面
// historyApiFallback: {
// rewrites: [
// { from: /^\/$/, to: '/views/landing.html' },
// { from: /^\/subpage/, to: '/views/subpage.html' },
// { from: /./, to: '/views/404.html' },
// ],
// },
},三、如何区分开发环境 ：优化
优化：把开发环境和生产环境所需的各个配置分离！！！！！！
1. 在根目录创建config文件夹，并创建几个文件
2. 修改package.json中的配置
可以进行配置执行的文件
build : 打包的时候，加载生产环境所需配置
serve : 开发的时候，加载开发环境所需配置
"scripts": {
"build": "webpack --config ./config/webpack.prod.config.js",
"serve": "webpack serve --config ./config/webpack.dev.config.js"
},3. webpack.comm.config.js配置
const path = require('path'); // Node内置模块
// 插件的导入方式可能不同，具体查看文档哦
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 结构出来
const { DefinePlugin } = require('webpack');
module.exports = {
// 因为当前代码环境跑在web上，进行配置一下
target: 'web',
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, '../dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'js/boundle.js' // 打包后的js的文件名
},
// 模块解析
resolve: {
// 这些后缀名不用写
extensions: ['.js', '.json', '.vue', '.css'],
// 配置别名
alias: {
'@': path.resolve(__dirname, '../src'),
commonImg: path.resolve(__dirname, '../src/img')
// ...
}
},
// 配置模块
module: {
// 规则
rules: [
// css|less文件
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
// 图片
{
test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
// 自动选择
type: 'asset',
parser: {
// 数据url的条件配置
dataUrlCondition: {
// 超过100kb的图片打包，小于的弄成bast64
maxSize: 10 * 1024
}
},
// 生成
generator: {
filename: 'img/[name]__[hash:8][ext]'
}
},
// 字体文件
{
test: /\.(eot|ttf|woff2?)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的字体文件
type: 'asset/resource',
// 生成
generator: {
filename: 'font/[name]__[hash:8][ext]'
}
},
// js文件
{
test: /\.js$/,
use: ['babel-loader']
}
]
},
// 配置插件,放置着一个个的插件对象
plugins: [
// 生成index.html文件，并使用模版
new HtmlWebpackPlugin({
// 指定模版路径
template: './public/index.html',
// 顺便定义一下title
title: '超级无敌巨帅小流星'
}),
// 定义变量
new DefinePlugin({
// 这里需注意 如果只有一层引号，那么内部会去找这个变量，所以如果要写字符串的话，里面再套一层，望周知
BASE_URL: '"./"'
})
// new VueLoaderPlugin()
]
};
4. webpack-merge
因为不管是生产环境，还是开发环境，都需要公共的部分，所以需要合并，合并需要一个插件
npm install webpack-merge -D5. webpack.dev.config.js配置
const path = require('path'); // Node内置模块
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.comm.config');
// 合并
module.exports = merge(commonConfig, {
// 设置模式
mode: 'development',
// 设置source-map,建立js映射文件，方便调试代码和错误
devtool: 'source-map',
// 配置服务
devServer: {
static: {
// 指定路径
directory: path.join(__dirname, './public')
},
// 模块热替换
hot: true,
// 启动gzip压缩,传输速率会变快
compress: true,
// 自动打开浏览器
open: true,
// 设置主机地址，默认是localhost，如果希望其他地方也可以访问，可以设置为 '0.0.0.0'
// host: '0.0.0.0',
// 设置端口号
port: 9000,
// 配置代理，解决代理问题
proxy: {
// 当遇到'/api'的时候
'/api': {
// 将目前的地址代理至target
target: 'http://localhost:8888',
// 将'/api' 重写为''
pathRewrite: {
'^/api': ''
},
secure: false,
// 在某些情况下会很有用
changeOrigin: true
}
},
// 设置为true时，路由跳转如果返回了404错误，会自动返回index.html的内容
historyApiFallback: true
}
});
6. webpack.prod.config.js配置
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.comm.config');
// 合并
module.exports = merge(commonConfig, {
// 设置模式
mode: 'production',
plugins: [
// 自动清空dist文件夹并重新生成
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
// 匹配你要复制的文件
patterns: [
{
// 入口
from: './public',
to: './public',
globOptions: {
// 忽略的文件
ignore: [
// public文件夹下所有的index.html文件都被忽略，不复制
'**/index.html'
]
}
}
]
})
]
});
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
