B
B
Blog
搜索文档…
⌃K

Webpack

版本

  • Webpack 5
    • 重大变更:功能清除
    • 重大变更:长期缓存
    • 重大变更:支持崭新的 Web 平台特性
    • 重大变更:支持全新的 Node.js 生态特性
    • 重大变更:开发体验
    • 重大变更: 构建优化
    • 重大变更:性能优化
    • 重大变更:长期未解决的问题
    • 重大变更:未来计划
    • 重大内部变更

Skills tree

自动清理构建目录产物:

PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀

移动端 px 自动转 rem

静态资源内联

多页面应用打包通用方案

动态获取 entry 和设置 html-webpack-plugin 数量
  • 利用 glob.sync
entry: blog.sync(path.join(__dirname, './src/*/index.js'));
  • webpack config entry
const {entry, htmlWebpackPlugins} = setMPA('./src/*/index.js', /src\/(.*)\/index\.js/);
// 1. set entry with above entry
// 2. concat htmlWebpackPlugins with above htmlWebpackPlugins
// 3. note: related .html

scripts

{
"scripts": {
"build": "webpack --mode production"
}
}
Entry
module.exports = {
entry: './src/index.js'
}
// ===
module.exports = {
entry: {
main: './src/index.js'
}
}
// 或者配置多个入口
module.exports = {
entry: {
foo: './src/page-foo.js',
bar: './src/page-bar.js',
// ...
}
}
// 使用数组来对多个文件进行打包
module.exports = {
entry: {
main: [
'./src/foo.js',
'./src/bar.js'
]
}
}
Loader
module.exports = {
// ...
module: {
// ...
rules: [
{
test: /\.jsx?/, // 匹配文件路径的正则表达式,通常我们都是匹配文件类型后缀
include: [
path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理
],
use: 'babel-loader', // 指定使用的 loader
},
]
}
}
Plugin
const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyPlugin()
],
}
Output
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
// 或者多个入口生成不同文件
module.exports = {
entry: {
foo: './src/foo.js',
bar: './src/bar.js',
},
output: {
filename: '[name].js',
path: __dirname + '/dist',
},
}
// 路径中使用 hash,每次构建时会有一个不同 hash 值,避免发布新版本时线上使用浏览器缓存
module.exports = {
// ...
output: {
filename: '[name].js',
path: __dirname + '/dist/[hash]',
},
}
Simple Webpack.config.js
const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?/,
include: [
path.resolve(__dirname, 'src')
],
use: 'babel-loader',
},
],
},
// 代码模块路径解析的配置
resolve: {
modules: [
"node_modules",
path.resolve(__dirname, 'src')
],
extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
},
plugins: [
new UglifyPlugin(),
// 使用 uglifyjs-webpack-plugin 来压缩 JS 代码
// 如果你留意了我们一开始直接使用 webpack 构建的结果,你会发现默认已经使用了 JS 代码压缩的插件
// 这其实也是我们命令中的 --mode production 的效果,后续的小节会介绍 webpack 的 mode 参数
],
}