简介：webpack5从0-1搭建项目 配置
### 步骤
mkdir webpack5-demo
cd webpack5-demo
npm/cnpm init -y
npm/cnpm install webpack webpack-cli -D
### 依照vue-cli脚手架新建好目录
### 安装相关依赖
npm/cnpm install webpack webpack-cli --save-dev
npm/cnpm install --save lodash
## 加载css
npm/cnpm install --save-dev style-loader css-loader
## 加载字体 加载 images 图像
自带的在 webpack 5 中，可以使用内置的 Asset Modules
### 多入口问题产生？ --- 解决
npm/cnpm install --save-dev html-webpack-plugin
如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的入口，会发生什么？会在构建时重新命名生成的 bundle，但是我们的 index.html 文件仍然引用旧的名称。让我们用 HtmlWebpackPlugin 来解决这个问题
### 在每次构建前清理 /dist 文件夹，这样只会生成用到的文件
npm/cnpm install --save-dev clean-webpack-plugin
### 问题产生？调试困难
devtool: 'inline-source-map',
当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。
### watch mode(观察模式)
package.json文件配置命令
"watch": "webpack --watch"
cnpm/npm run watch
### 问题产生？ 为了看到修改后的实际效果，你需要刷新浏览器
解决：
npm install --save-dev webpack-dev-server
webpack.config.js中配置
devServer: {
contentBase: './dist',
}
package.json文件配置命令
"start": "webpack serve --open",
npm/cnpm start
### 使用 webpack-dev-middleware 参考官网：https://webpack.docschina.org/guides/development/
npm/cnpm install --save-dev express webpack-dev-middleware
webpack.config.js中配置
output: {
publicPath: '/',
}
package.json文件配置命令
"server": "node server.js",
npm/cnpm run server
### vendor hash 发生变化是我们要修复的
optimization.moduleIds 设置为 'deterministic'
### 将文件标记为 side-effect-free(无副作用)
通过 package.json 的 "sideEffects" 属性，来实现这种方式
"side effect(副作用)" 的定义是，在导入时会执行特殊行为的代码，而不是仅仅暴露一个 export 或多个 export。举例说明，例如 polyfill，它影响全局作用域，并且通常不提供 export。
"sideEffects": false
如果你的代码确实有一些副作用，可以改为提供一个数组;
如果在项目中使用类似 css-loader 并 import 一个 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除：
"sideEffects": [
"./src/xxx1.js",
"./src/xxx2.js"
....,
"*.css"
]
再或者
"sideEffects":["*.css","@babel/polyfill"],
sideEffects 和 usedExports（更多被认为是 tree shaking）是两种不同的优化方式。
sideEffects 更为有效 是因为它允许跳过整个模块/文件和整个文件子树
在使用 tree shaking 时必须有 ModuleConcatenationPlugin 的支持，您可以通过设置配置项 mode: "production" 以启用它。如果您没有如此做，请记得手动引入 ModuleConcatenationPlugin
总结：
webpack5的新特性：
1.更快的构建速度 【模块打包提供了一个可选的文件系统缓存。通过设置合适的缓存系统，我们可以大大加快构建速度，大大提高开发人员的工作效率】
2.更小的体积 【新版本的webpack对代码进行了模块化的管理，可以检测到无用代码，可以删除未使用的代码，可以删除模块内部的代码】
3.更智能的缓存优化 【对局部模块代码的修改，不会影响其它模块的缓存】
4.更灵活的模块组合 【允许多个Webpack构建协同工作。webpack5允许不同的应用程序从不同版本的webpack动态加载代码】
5.更高的版本要求 【nodejs的版本使用10.13以上版本，添加了实验性的WebAssembly，Async Web Assembly，Await等特性】
Webpack 5 增加了一个新的功能 "模块联邦"，它允许多个 webpack 构建一起工作
嵌套的 tree-shaking
CommonJs Tree Shaking
内部模块 tree-shaking 【optimization.innerGraph】
单一文件目标的代码分割
只允许启动单个文件的目标（如 node、WebWorker、electron main）现在支持运行时自动加载引导所需的依赖代码片段。
这允许对这些目标使用 chunks: "all" 和 optimization.runtimeChunk
MemoryCachePlugin 增加了内存缓存功能。FileCachePlugin 增加了持久性（文件系统）缓存。
FileCachePlugin 使用序列化机制将缓存项目持久化到磁盘上或从磁盘上恢复
插件目的在于解决 loader 无法实现的__其他事__
### 冲突问题 mini-css-extract-plugin 支持css分割 支持HMR
将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件。它支持css和sourceMaps的按需加载
rules: [
{
test: /.(css|stylus)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader', // 跟MiniCssExtractPlugin.loader一起使用时 要添加 使用范围
options:{
plugins:[
require('autoprefixer')({
overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']
})
]
}
},
'stylus-loader'
],
exclude:/node_modules/,
include: [path.resolve(__dirname, 'src')]
},
]
### 代码压缩
4.x版本后自动压缩
* development 不压缩代码 mode: 'development' or webpack --mode=development
* production 压缩代码，默认 mode: 'production' or webpack --mode=production
需要在webpack.config.js配置不启用压缩
// 安装 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css文件
new OptimizeCssAssetsWebpackPlugin()
之前使用 uglifyjs-webpack-plugin
const uglify = require('uglifyjs-webpack-plugin');
plugins:[
new uglify()
]
关于sass sass-loader 8.0语法 9.0 配置
https://github.com/chuzhixin/vue-admin-beautiful/blob/master/vue.config.js
参考相关具体配置
https://github.com/ddzy/vue2-webpack5-template/blob/main/webpack.config.ts
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
mode: 'development', // 开发环境 默认是生产
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
},
// entry: './src/main.js', // 单入口
// 多入口
entry:{
index: {
import: './src/main.js',
dependOn: 'shared',
},
index2: {
import: './src/main2.js',
dependOn: 'shared',
},
shared: 'lodash',
},
// 出口
output: {
// [contenthash] substitution 将根据资源内容创建出唯一 hash。当资源内容发生变化时，[contenthash] 也会发生变化
filename: 'js/[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
pathinfo: false, // webpack 会在输出的 bundle 中生成路径信息 在打包数千个模块的项目中，这会导致造成垃圾回收性能压力
publicPath: './' // 如果报错 Automatic publicPath is not supported in this browser
},
// 如果我们要在一个 HTML 页面上使用多个入口时，还需设置 optimization.runtimeChunk: 'single'
optimization: {
// 使用 optimization.splitChunks 配置选项之后
// 需要注意的是，插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小
// splitChunks: {
// chunks: 'all',
// },
// runtimeChunk: 'single', // 打包额外生成了一个 runtime.bundle.js 文件
// 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中，是比较推荐的做法
moduleIds: 'deterministic',
usedExports: true, // 配置此项需要将 mode 配置设置成development，以确定 bundle 不会被压缩
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
// 应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误
module: {
rules: [
{
test: /.css$/i,
// MiniCssExtractPlugin.loader,// loader取代style.loader,作用，提取js中的css文件
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
// 不用搞file-loader url-loader 用type定义
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024, //小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
},
},
generator: {
filename: 'images/[base]',
},
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[base]',
},
},
]
},
plugins: [
new MiniCssExtractPlugin({
// filename: 'css/[name].[contenthash].css', //输出的文件名字
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
}), // 抽离css
// 如果不想在 watch 触发增量构建后删除 index.html 文件，可以在 CleanWebpackPlugin 中配置 cleanStaleWebpackAssets 选项 来实现
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebpackPlugin({
title: 'Development', // 首页标题
}),
],
// 持久缓存 【性能优化】
cache: {
// 1. 将缓存类型设置为文件系统
type: 'filesystem', // 可以在 "memory" 和 "filesystem" 间进行选择
buildDependencies: {
// 2. 将你的 config 添加为 buildDependency，以便在改变 config 时获得缓存无效
config: [__filename],
// 3. 如果你有其他的东西被构建依赖，你可以在这里添加它们
// 注意，webpack、加载器和所有从你的配置中引用的模块都会被自动添加
},
},
}
reset.css测试文件1
* {
padding: 0;
margin: 0;
}
@font-face {
font-family: 'Nunito-Regular';
src: url('./fonts/Nunito-Regular.ttf');
}
@font-face {
font-family: 'Nunito-Bold';
src: url('./fonts/Nunito-Bold.ttf');
}
@font-face {
font-family: 'Nunito-SemiBold';
src: url('./fonts/Nunito-SemiBold.ttf');
}
.hello {
color: red;
font-family: 'Nunito-Bold';
background: url('./image/logo.png');
}
package.json测试文件
{
"name": "webpack5-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack serve --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^1.3.5",
"style-loader": "^2.0.0",
"webpack": "^5.20.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"lodash": "^4.17.20"
}
}
转载注明出处！！！谢谢合作！！！