webpack基础配置
webpack基础
-
- webpack 处理css兼容问题
- webpack 处理css闪屏问题
- webpack 优化压缩css代码
-
- 总结
-
- webpack 两种开发模式
- webpack 基本的功能
- webpack配置 5概念+devServer
- 生产环境webpack配置实例
- 开发环境webpack配置实例
- webpack优化
webpack 处理css兼容问题
下载loader 引入 package.json修改
- postcss-loader 可以处理css兼容问题 需要在css-loader 之后——其他cssloader 之前 引入
- package.json 添加数组 browserlist:[“ie>=8”,“>1%”,“not dead”] 百分之99 还存在的浏览器 大于等于ie8
webpack 处理css闪屏问题
MiniCssExtractPlugin 使用插件的loader
将css文件以单文件link方式引入 避免出现闪屏现象
- 不使用style-loader
- 使用MiniCssExtractPlugin.loader
webpack 优化压缩css代码
CssMinimizerWebpackPlugin
- 下载安装 引入webpack 配置文件 直接在plugin中new CssMinimizerWebpackPlugin()
- 提示：默认生产环境下 js html 会自动压缩不需要额外的配置
总结
webpack 两种开发模式
- 开发模式：代码能编译自动化运行 devServer 不用输出
- 生产模式：代码编译优化输出
webpack 基本的功能
- 开发模式：可以编译 es module 语法
- 生产模式：可以编译 es module 语法 压缩js代码
webpack配置 5概念+devServer
entry、output、loader、plugins、mode 、devServer
生产环境webpack配置实例
const path = require("path"); //node.js核心模块，专门用来处理路径问题
const os = require("os"); // Node.js的os模块是一个内置模块，用于提供与操作系统相关的功能。
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css文件以单文件link方式引入 避免出现闪屏现象
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //css压缩
const TerserWebpackPlugin = require("terser-webpack-plugin"); //js压缩
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); //图片压缩
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin"); //预加载当前页的资源
const threads = os.cpus().length;
function getStyleLoader(pre) {
return [
// 将 JS 字符串生成为 style 节点
//"style-loader",
//不使用style-loader 下面的这个会生成单个css文件 link引入 避免出现闪屏现象
MiniCssExtractPlugin.loader,
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// postcss-loader 能解决大部分css兼容问题
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// 其他选项
},
],
],
},
},
},
pre,
].filter(Boolean);
//filter 过滤掉undefined null 等返回false的数组元素
}
//启动命令 npx webpack --config ./config/webpack.prod.js
// 生产模式 不需要devServer
module.exports = {
// 入口
entry: "./src/main.js", //相对路径
// 输出
output: {
// 文件的输出路径
// __dirname node.js的变量，代表当前文件的文件夹目录
path: path.resolve(__dirname, "../dist"), // 绝对路径
// 入口文件打包的文件名
// filename: "js/main.js", 下面的命名方式，兼容多入口
filename: "js/[name].js",
// 图片、字体等通过type：asset处理资源命名 可以统一定义在此处，下面就不用写了
//assetModuleFilename:"media/[hash][ext][query]"
// code split给打包输出的其他名字命名
chunkFilename: "js/[name].chunk.js",
clean: true, //自动清理上次打包的内容
},
//加载器
module: {
rules: [
// loader的配置
{
oneOf: [
// style-loader 将js中的css通过创建style标签添加html文件中生效
// css-loader 将css资源编译成common.js的模块到js中
{ test: /\.css$/, use: getStyleLoader() }, // use执行顺序 从右到左、从下到上
{ test: /\.ts$/, use: "ts-loader" },
{
test: /\.s[ac]ss$/i,
use: getStyleLoader("sass-loader"),
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
// 不需要下载 loader webpack5内置处理
// 小于10kb 的图片转base64
// 优点 减少请求的数量 缺点 体积会大一点点
maxSize: 10 * 1024, // 10kb
},
},
generator: {
//打包后指定图片路径
// [hash:10] hash值取前十位
filename: "imgs/[hash][ext][query]",
},
},
{
test: /\.(ttf|woff2?|mp3|mp4)$/,
type: "asset/resource", //转base64 用asset
generator: {
//打包后指定文字路径
filename: "media/[hash][ext][query]",
},
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: "thread-loader", // 开启多进程
options: {
works: threads, // 进程数
},
},
{
loader: "babel-loader",
// 下面对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处
options: {
// presets: ["@babel/preset-env"],
cacheDirectory: true, // 开启babel缓存
cacheCompression: false, // 关闭缓存文件压缩
plugins: ["@babel/plugin-transform-runtime"], //减少代码体积
},
},
],
},
],
},
],
},
//插件
// plugin的配置
plugins: [
new ESLintPlugin({
context: path.resolve(__dirname, "../src"), //检查文件
exclude: "node_modules", //默认值
cache: true, // 开启缓存
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/eslintcache"
),
threads, //开启多进程
}),
new HtmlWebpackPlugin({
//模版，以public/index.html文件为模版创建新的html文件
//新的html文件特点：1结构和原来一致，2.自动引入打包输出的资源
template: path.resolve(__dirname, "../public/index.html"),
}),
new PreloadWebpackPlugin({
rel: "preload", //option:prefetch
as: "scrpit", //option:stylesheet/icon/next
}),
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash:10].css",
chunkFilename: "css/[name].chunk.[contenthash:10].css",
}),
new ImageMinimizerPlugin({
test: /\.(jpe?g|png|gif|svg)$/i, // 匹配要压缩的图像文件类型的正则表达式
exclude: /node_modules/, // 排除哪些文件夹下的图像不参与压缩
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
["gifsicle", { interlaced: true }], // 使用gifsicle插件压缩gif图像
["jpegtran", { progressive: true }], // 使用jpegtran插件压缩jpg图像
["optipng", { optimizationLevel: 5 }], // 使用optipng插件压缩png图像
[
"svgo",
{
plugins: [
"preset-default", // 使用svgo的默认插件集合压缩svg图像
"prefixIds", // 为svg元素添加唯一前缀，防止id冲突
{
name: "sortAttrs",
params: {
xminsOrder: "alphabetical", // 按字母顺序排序svg属性
},
},
],
},
],
],
},
},
}),
// 下面两个插件可以放在这个位置
// new CssMinimizerPlugin(),
// new TerserWebpackPlugin({
// parallel:threads //开启多进程并设置进程数
// })
],
// 也可以放在这个位置 webp5 推荐压缩插件放在下面
optimization: {
minimizer: [
//压缩css
new CssMinimizerPlugin(),
// 压缩js
new TerserWebpackPlugin({
parallel: threads, //开启多进程并设置进程数
}),
],
splitChunks: {
chunks: "all",
//其他都用默认值
},
//当缓存文件发生变化，一般所有都更新，加上这个只更新修改的文件，其他缓存文件不变
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}.js`,
},
},
//模式
mode: "production",
devtool: "source-map",
};
开发环境webpack配置实例
const path = require("path"); //node.js核心模块，专门用来处理路径问题
const os = require("os");
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //编译时生成index.html
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css文件以单文件link方式引入 避免出现闪屏现象
const threads = os.cpus().length;
//启动命令 npx webpack serve --config ./config/webpack.dev.js
module.exports = {
// 入口
entry: "./src/main.js", //相对路径
// 输出
output: {
// 文件的输出路径
// 开发模式 没有输出
path: undefined,
// 入口文件打包的文件名
filename: "js/main.js",
},
// webpack 热更新 使用devServe后运行命令为 npx webpack serve ctrl+c 终止批处理操作
// 开发服务器：不会输出资源，在内存中编译打包
devServer: {
host: "localhost",
port: "4057",
hot: true, // 表示启用热模块替换，不用刷新整个页面
open: true, //自动打开浏览器
},
//加载器
module: {
rules: [
// loader的配置
{
oneOf: [
// style-loader 将js中的css通过创建style标签添加html文件中生效
// css-loader 将css资源编译成common.js的模块到js中
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }, // use执行顺序 从右到左、从上到下
{ test: /\.ts$/, use: "ts-loader" },
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
MiniCssExtractPlugin.loader,
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// 将 Sass 编译成 CSS
"sass-loader",
],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
// 不需要下载 loader webpack5内置处理
// 小于10kb 的图片转base64
// 优点 减少请求的数量 缺点 体积会大一点点
maxSize: 10 * 1024, // 10kb
},
},
generator: {
//打包后指定图片路径
// [hash:10] hash值取前十位
filename: "imgs/[hash][ext][query]",
},
},
{
test: /\.(ttf|woff2?|mp3|mp4)$/,
type: "asset/resource", //转base64 用asset
generator: {
//打包后指定文字路径
filename: "media/[hash][ext][query]",
},
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader:"thread-loader",
options:{
works:threads
}
},
{
loader: "babel-loader",
// 下面presets对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处
options: {
// presets: ["@babel/preset-env"],
cacheDirectory: true, // 开启babel缓存
cacheCompression: false, // 关闭缓存文件压缩
},
},
],
},
],
},
],
},
//插件
// plugin的配置
plugins: [
new ESLintPlugin({
context: path.resolve(__dirname, "../src"), //检查文件
cache:true,
threads,
}),
new HtmlWebpackPlugin({
//模版，以public/index.html文件为模版创建新的html文件
//新的html文件特点：1结构和原来一致，2.自动引入打包输出的资源
template: path.resolve(__dirname, "../public/index.html"),
}),
],
//模式
mode: "development",
devtool: "cheap-module-source-map",
};
webpack优化
webpack优化-见下篇