webpack开发全家桶
webpack开发全家桶
- 开发环境配置
-
- webpack-dev-server
-
- 配置 devServer 指定静态资源服务器路径
- 配置代理服务，解决开发环境接口跨域问题
- 配置 Source Map
- HMR — Hot Module Replacement
-
- 使用方式
- HMR 注意事项
- 多环境配置
-
- 根据环境不同导出不同配置
- 一个环境对应一个配置文件
- DefinePlugin
-
- 示例
- webpack优化
-
- Tree Shaking
- concatenateModules
- sideEffects
- 代码分割
-
- 多入口打包
- 动态导入
- MiniCssExtractPlugin
- OptimizeCssAssetsWebpackPlugin
- 输出文件名 Hash
开发环境配置
webpack-dev-server
webpack-dev-server 集成 自动编译 和 自动刷新浏览器 等功能
npx webpack-dev-server --自动编译打包，并将打包结果放在内存中
npx webpack-dev-server --open–自动编译打包，并将打包结果放在内存中，启动http server，打开浏览器
配置 devServer 指定静态资源服务器路径
module.exports = {
devServer: {
contentBase: './public'
}
}
配置代理服务，解决开发环境接口跨域问题
module.exports = {
devServer: {
contentBase: './public',
proxy: {
// 请求路径的前缀：规则配置
'/api': {
// http://localhost:8080/api/users -> https://api.github.com/api/users
target: 'https://api.github.com',
// 不能使用 localhost:8080 作为请求 GitHub 的主机名
changeOrigin: true, // 以代理目标的主机名 去请求
// http://localhost:8080/api/users -> https://api.github.com/users
pathRewrite: {
'^/api': ''
}
}
}
}
}
配置 Source Map
sourceMap 文件映射了转换后的代码与源代码之间的关系，解决了调试应用，报错无法定位的问题。
在转换后的代码文件中的最后一行会自动添加注释：
//# sourceMappingURL=jquery.min.map
配置方式：webpack.config.js增加devtool:'source-map
webpack 支持12种 sourceMap 方式，每种效率和效果各不相同；
具体选用规则：
- 开发模式：cheap-module-eval-source-map
- 生产环境：none 或 nosources-source-map
详细信息参考官网source-map
HMR — Hot Module Replacement
文件修改后重新打包，然后自动刷新浏览器，页面中原有的信息就会被刷新掉（输入框中的数据）
使用方式
webpack.config.js中增加配置：
module.exports = {
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
HMR 注意事项
- 处理 HMR 的代码报错会导致自动刷新，解决方法：使用
hotOnly: true代替hot: true - 没启用 HMR 的情况下，HMR API 报错。
module.hot方法是 HMR 插件提供的，如果没有开启 HMR 就会报错：Cannot read property 'accept' of undefined。
所以使用之前要做空值判断：
if (module.hot) { // ... }
如果没有开启 HMR，上面这种代码经过 webpack 打包后会变成：
if (false) {
}
多环境配置
两种方式：
- 配置文件根据环境不同导出不同配置
- 一个环境对应一个配置文件。
根据环境不同导出不同配置
配置文件导出一个函数，返回一个配置对象。函数接收两个参数：通过 cli 传递的环境名参数env，运行 cli 过程中所传递的所有参数argv
module.exports = (env, argv) => {
const config = {
mode: 'none',
entry: './src/main.js',
devtool: 'source-map',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist/')
},
module: {
rules: [
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.png$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
if (env === 'production') {
config.mode = 'production',
config.devtool = 'nosources-source-map',
config.plugins = [
...config.plugins,
new CleanWebpackPlugin(),
new CopyWebpackPlugin(['public'])
]
}
return config
}
一个环境对应一个配置文件
webpack.dev.js//开发环境配置
webpack.prod.js//生产环境配置
可将共同的配置文件提取到webpack.common.js中
然后用webpack-merge合并配置：
// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production'
})
DefinePlugin
为代码注入全局成员，直接替换代码中的同名变量成员
在 production 模式下，DefinePlugin默认启用，并往代码中注入了 process.env.NODE_ENV
示例
声明API_BASE_URL
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
API_BASE_URL: '"https://api.example.com"',//DefinePlugin 要求注入的值是一个 JavaScript 代码片段
//API_BASE_URL: JSON.stringify('https://api.example.com'), // 字符串,与上面API_BASE_URL的声明是等价的
PARAMS: {
// 对象
name: 'zs',
age: 20
},
NUMBER: 30, // 数字
BOOLEAN: true, // Boolean
FUNC: function() {
console.log('func')
}
})
]
}
打包后：
console.log("https://api.example.com");
const params = Object({
"name":zs,"age":20});
const number = 30;
const boolean = true;
const func = (function() {
console.log('func')
});
webpack优化
Tree Shaking
去除冗余代码，优化生产环境的代码。在生产模式下会自动开启
Tree-shaking 不是某个配置选项，是一组功能搭配使用后的优化效果
非生产模式开启Tree Shaking，通过 optimization配置选项
optimization： 集中配置 webpack 优化功能的选项
module.exports = {
optimization: {
usedExports: true, // 只导出外部使用的成员
minimize: true // 压缩代码
}
}
tree-shaking 是针对 ES Module 的模块代码进行处理，而 babel 中有些功能会将 ES Module 转为 CommonJS，从而导致 tree-shaking 失效。可以通过配置 preset-env 来解决
odule.exports = {
module: {
rules: [
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
// presets: ['@babel/preset-env']
presets: [
// 嵌套数组
// =============== 关闭 ESModule 转化为 CommonJS的功能
['@babel/preset-env', {
modules: false }]
]
}
}
}
]
}
}
concatenateModules
尽可能的将所有模块合并输出到一个函数中，既提升了运行效率，又减少了代码的体积。
module.exports = {
optimization: {
usedExports: true, // 只导出外部使用的成员
concatenateModules: true,
minimize: true // 压缩代码
}
}
sideEffects
sideEffects是指模块执行时，除了导出成员之外所做的其他事情
比如：
// components/index.js
export {
default as Button } from './button.js';
export {
default as Link } from './link.js';
export {
default as Header } from './header.js';
上面代码只是导出了模块，没有做其他事情
// main.js
// 只想从 index.js 中导入 Button 组件，
// 但是 index.js 中又载入了所有的组件，
// 导致所有的模块都会被加载执行
import {
Button } from './components/index.js';
若optimization 选项中配置 sideEffects 配置为 true，webpack 就会去检查当前项目的 package.json 文件中是否存在 sideEffects 字段，从而判断模块是否有副作用，如果没有副作用，这些没有用到的模块就不会被打包。
//webpack.config.js
module.exports = {
optimization: {
// 开启副作用检查
sideEffects: true,
}
}
//package.json中增加配置
{
"sideEffects": false // 表明项目中没有副作用
}
使用 sideEffects，需要确保代码中真的没有副作用代码
上面的配置方式是全局的，实际开发中并不能确保整个项目里没有副作用代码，比如第三方插件的使用等，所以最好的方法是指定副作用检查的范围（模块）
//package.json
{
"sideEffects": [
"./src/extends.js",
"*.css"
]//指定副作用规则
}
代码分割
所有模块一起打包会导致 bundle.js 太大，所以需要分包,按需加载
多入口打包
多入口打包一般适用于多页应用程序，一个页面对应一个打包入口，公共部分提取一起打包。
- entry配置为对象（如果是数组的话，就是把多个文件打包到一起。）
module.exports = {
entry: {
index: './src/index.js',
album: './src/album.js'
},
output: {
// [name] 占位符，最终会被替换成 entry 定义的文件名称
filename: '[name].bundle.js'
}
}
- html 文件中只引入对应的 bundle.js
HtmlWebpackPlugin默认会生成注入所有打包结果的 html；如果需要指定 html 所使用的bundle，可以使用 chunks 属性
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
filename: 'index.html',
chunks: ['index']
})
new HtmlWebpackPlugin({
template: './src/album.html'
filename: 'album.html',
chunks: ['album']
})
]
}
- 提取公共模块
对于不同模块引用到的公共模块，如：vue，jQuery，可以将他们提取出来，放在单独的文件中
使用 webpack 的 optimization 选项的 splitChunks 属性配置
module.exports = {
optimization: {
splitChunks: {
chunks: 'all' // 表示把所有的公共模块都提取到单独的 bundle 文件中
cacheGroups: {
// 抽取自定义的公共模块
commons: {
name: 'commons'
}
}
}
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'index',
filename: 'index.html',
template: './src/index.html',
chunks: ['index', 'commons'] // commons 为公共模块
}),
new HtmlWebpackPlugin({
title: 'album',
filename: 'album.html',
template: './src/album.html',
chunks: ['album', 'commons'] // commons 为公共模块
})
]
}
动态导入
需要使用到某个模块的时候，再加载这个模块。动态导入的模块会被自动分包
// ES Modules 动态导入成员的方式导入模块
import('./posts/posts').then(module => {
// TODO: 使用模块
});
// 如果导入的模块是使用 默认导出的方式，需要将其解构出来
import('./posts/posts').then(({
default: posts }) => {
// TODO: 使用模块
});
MiniCssExtractPlugin
提取 css 到到单独文件中（一般推荐css文件超过了 150KB 才使用）
module.exports = {
plugins: [
new MiniCssExtractPlugin()
]
}
由于该插件可以提取 css 到单独模块，所以不需要使用到 style-loader 了，取而代之的是使用该插件提供的 loader
module: {
rules: [
{
test: /.css$/,
use: [
// 'style-loader', // 通过 style 标签注入
MiniCssExtractPlugin.loader,
'css-loader',
]
}
]
}
OptimizeCssAssetsWebpackPlugin
压缩资源文件
- 配置在 plugins 数组中
//webpack.config.js
module.exports = {
//...,other config
plugins: [
//...,
new OptimizeCssAssetsWebpackPlugin()
]
}
- 配置在 optimization.minimizer 数组中，由 minimize 选项控制，但这样会覆盖原有的压缩器，导致 js 的压缩功能不能使用
module.exports = {
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin()
]
}
}
输出文件名 Hash
解决资源文件更新，浏览器缓存问题（控制文件名 hash 的长度 [contenthash:8]）
有以下几种使用方式：
- [name]-[hash].bundle.js
改变任一文件，打包后所有文件的文件名都会发生变化 - [name]-[chunkhash].bundle.js
同一路的打包，chunkhash 都是相同的。比如多入口配置的文件、按需引入模块。改动 moduleA.js，打包后，其对应的文件名发生改变，而其他不会变。 - [name]-[contenthash].bundle.js
根据文件输出的内容生成的hash，不同的文件，有不同的hash