webpack是一个打包模块化JavaScript的工具,它会从入口模块出发,识别源码中的模块化导入语句,递归查找入口文件的所有依赖,将入口和其所有的依赖打包到一个单独的文件中
默认入口:src/index.js
默认输入:dist/main.js
默认支持多种模块化类型,如commonJS、esmodule、AMD
默认支持js模块和json模块
webpack配置文件:webpack.config.js
webpack基于node,所以其配置文件遵循CommonJS规范,通过 module.exports
导出一个对象
处理JS文件中引入的 xxx.css
css-loader
style-loader
css-loader
通过CSS in JS
模式,把xxx.css
中的CSS
内容打包到JS中
style-loader
在
下动态创建 ,并把
CSS
插入标签内
注意:默认情况下,每引入一个xxx.css
,便会生成一个
配置style-loader
,合并
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag'
}
}
Plugins
扩展插件,在webpack构建流程中的特定时机注入扩展逻辑,来改变构建结果,作用于整个构建过程。
通常希望把CSS导出一个独立的文件,那么就不能使用style-loader
了,而是借助插件MiniCssExtractPlugin
// module
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader', // 加兼容性的前缀
'less-loader' // 预处理less
]
}
// plugins
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[chunkhash:8].css' // 配置导出CSS文件的名称
})
]
sourceMap 源代码与打包代码的映射关系,通过sourceMap定位到源代码
在development模式下,默认开启。
关闭的话在 webpack.config.js 中配置
devtool: "none"
WebpackDevServer:WDS
提升开发效率的利器:每次修改代码都要重新打包,刷新浏览器,使用WebpackDevServer来改善这方面的体验。
WDS是一个运行在内存中的开发服务器(一个express),启动之后,它会检测文件是否发生改变并自动编译、刷新
npm i webpack-dev-server -D
// package.json
"scripts": {
"server": "webpack-dev-server"
}
//webpack.config.js
devServer: {
contentBase: "./dist",
port: 8081,
open: true
}
contentBase
设置服务启动后的资源地址
port
服务的端口号
open
启动服务时,自动打开浏览器
执行 npm run server
开启服务,会发现本地没有了dist目录,这是因为WDS把打包文件放于内存中,提升运行效率。
在前端项目中自己创建一个Mock服务
npm i express -D
在项目根目录下创建server.js
const express = require('express')
const app = express()
app.get('/api/info', (req, res) => {
res.json({
name: 'webpack',
age: 5
})
})
app.listen('9092')
启动:node server.js
devServer 配置跨域
devServer: {
//...
proxy: {
"/api": {
target: "http://localhost:9092"
}
}
}
HMR:热模块更新,webpack的自带插件
WDS每次重新编译都会自动刷新浏览器,也就造成当前状态的丢失问题
HMR 只刷新项目中的模块,不刷新浏览器,能够保留当前状态
const webpack = require('webpack')
devServer: {
// ...
hot: true,
hotOnly: true // 热更新不要刷新浏览器
}
plugins: [
// ...
new webpack.HotModuleReplacementPlugin()
]
HMR 默认只支持 style-loader
处理的CSS(动态创建