webpack开发全家桶
Posted michael_yqs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack开发全家桶相关的知识,希望对你有一定的参考价值。
webpack开发全家桶
开发环境配置
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
以上是关于webpack开发全家桶的主要内容,如果未能解决你的问题,请参考以下文章