九、自动刷新
- 使用watch + live server
// 2种方式
// 1. package.json
"scripts": {
"build": "webpack --watch"
}
// 2. webpack.config.js
module.exports = {
watch: true,
/**/
}
不足
1.所有源代码都会重新编译
2.每次编译成功之后都需要进行文件读写
3.live server是vscode的工具
4.不能实现局部刷新
- 使用webpack-dev-server
yarn add webpack-dev-server --dev
// package.json
"scripts": {
"build": "webpack",
"serve": "webpack serve"
}
// 注意如果不是默认webpack配置，需要修改了配置文件名
// "serve": "webpack serve --config xx.webpack.js"
3.使用webpack-dev-middleware导出文件到一个服务器。
实际开发过程中，不是经常使用。
yarn add webpack-dev-middleware --dev
const express = require('express')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
const app = express()
// 获取配置文件
const config = require('./webpack.config.js')
const compiler = webpack(config)
app.use(webpackDevMiddleware(compiler))
// 开启端口上的服务
app.listen(3000, () => {
console.log('服务运行在 3000端口上')
})
运行node ./Server.js启动服务， 浏览器打开页面就可以了。
十、热更新
- HMR
// webpack.config.js
// 开发阶段屏蔽 .browserslistrc
target: 'web',
// 开启HMR
devServer: {
hot: true
}
// js文件
if (module.hot) {
// 限制哪些文件需要热更新
module.hot.accept(['./title.js'], () => {
console.log('title.js模块更新')
})
}
// 运行yarn serve
- React-HMR
a. 安装react环境
yarn add react react-dom --dev
b. 安装webpack可以识别react预设
yarn add @babel/preset-react --dev
只是这样，并不能达到react热加载。
c. 使用react插件，首先需要一个插件负责把具体要使用的插件和webpack结合起来
yarn add @pmmmwh/react-refresh-webpack-plugin --dev
d. 安装react热加载插件
yarn add react-refresh --dev
// babel.config.js
module.exports = {
presets: [
[ '@babel/preset-env' ],
// 识别jsx文件
[ '@babel/preset-react' ]
],
plugins: [
// react热更新插件
['react-refresh/babel']
]
}
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
// webpack.config.js
module.exports = {
/*省略*/
// 开发阶段屏蔽 .browserslistrc
target: 'web',
// 开启HMR
devServer: {
hot: true
},
module: {
rules: [
/*省略*/
{
// js或者jsx
test: /\.jsx?$/,
// 防止node_modules中的库也使用了babel，导致干扰
exclude: /node_modules/,
use: [ 'babel-loader' ]
}
]
},
plugins: [
/*省略*/
// 负责让把具体要使用的插件和webpack结合起来
new ReactRefreshWebpackPlugin()
]
}
3.Vue-HMR
a. 安装环境
yarn add vue
编译vue代码，将Vue 2.0模板预编译为呈现函数
yarn add vue-template-compiler --dev
b. 安装热加载插件
yarn add vue-loader --dev
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
/* 省略 */
// 开发阶段屏蔽 .browserslistrc
target: 'web',
// 开启HMR
devServer: {
hot: true
},
module: {
rules: [
/* 省略 */
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
plugins: [
/* 省略 */
// 针对vue-loader > 15的版本，需要手动设置插件
new VueLoaderPlugin()
]
}
十、path路径
- output中的路径
// webpack.config.js
output: {
filename: 'js/main.js',
// 输出到哪儿
path: path.join(__dirname, 'dist'),
// 默认空字符串， 浏览量会帮我们添加/
// publicPath: ''
// 自己添加/, 但是这样本地路径会找不到
// publicPath: '/'
// 相对路径, 本地可以访问，但是webpack serve会找不到
// publicPath: './'
// 输出解析文件的目录，指定资源文件引用的目录
// 由线上静态资源存放的路径决定的
// 注意这边后面有个/
publicPath: '/lg/'
}
- devserver中的路径
devServer: {
hot: true,
static: {
// 代表生成的文件在哪儿， 需要output里面publicPath和这里一致
// 此路径下的打包文件可在浏览器中访问, 代表浏览器里面的路径
publicPath: '/lg',
// 我们打包之后的资源如果说依赖其它的资源，此时就告知去哪找。
// 强烈建议使用绝对路径
directory: path.join(__dirname, 'public'),
// 监听directory
watch: true
},
}
- output
publicPdth: index.html内部的弓|用路径
域名+ publicPath + filename- devServer
publicPath:指定本地服务所在的目录
directory:我们打包之后的资源如果说依赖其它的资源，此时就告知去哪找。
- devServer 其他配置
// 只热加载变化的部分
hot: 'only',
// 开启压缩
compress: true,
// 处理直接向后端请求，导致404的问题
historyApiFallback: true,
十一、proxy代理设置
处理测试环境中跨域的问题
// webpack.config.js
proxy: {
// /info/users
// http://localhost:4000/info/users
// https://api.github.com/info/users
'/info': {
target: 'https://api.github.com',
// 重写
pathRewrite: { "^/info": "" },
// 修改host
changeOrigin: true
}
}
// index.js
import axios from 'axios'
// http://localhost:8080/info/users
axios.get('/info/users').then((res) => {
console.log(res.data)
})
十二、resolve模块解析规则
- 如果后缀是个文件，如果没有extension，那么会默认找js、json。
- 如果后缀是个文件夹，会默认找文件夹里面的index，然后按照文件的方式找。
- 手动添加extension 和 别名
// webpack.config.js
resolve: {
// 添加新的扩展名
extensions: [".js", ".json", '.ts', '.jsx', '.vue'],
// 添加别名
// import Home from './components/Home'
// =>
// import Home from '@/components/Home'
alias: {
'@': path.resolve(__dirname, 'src')
}
},
十三、source-map
在调试的时候可以定位到源代码中的信息，建议开发使用cheap-module-source-map 或者 cheap-module-eval-source-map
// 通过这个找到对应source-map文件，全量的
devtool: 'source-map'
// source-map直接base64直接在模块里面
devtool: 'eval-source-map’
// source-map直接base64直接在文件最后
devtool: 'inline-source-map’
// 只有行信息，没有列信息
devtool: 'cheap-source-map’
// 显示原始错误信息（不会空行优化）
devtool: 'cheap-module-source-map’
// 会生成source-map，不会主动有map映射标记, 三方包方便调试。
devtool: 'hidden-source-map’
// 会生成source-map，只有提示， 没有具体链接。 包含代码，线上使用。
devtool: 'nosource-source-map’
