const path = require("path");
//语法检查
const ESLintPlugin = require("eslint-webpack-plugin");
//为html文件中引入的外部资源如script、link动态添加每次build后的新内容
const HtmlWebpackPlugin = require("html-webpack-plugin");
//优化和压缩 CSS。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const os = require('os');
// 压缩js
const terserWebPackPlugin = require('terser-webpack-plugin');
const threads = os.cpus().length;//获取cpu核数
// 封装重复postcssloader代码
function getStyleLoader(pre) {
return [
MiniCssExtractPlugin.loader, "css-loader", {
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"]
}
}
},
...pre
].filter(Boolean)
}
module.exports = {
entry: "./src/index.js",
// 生产模式打包超过244kb 报错 需要关闭
performance: {
hints: false
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/index.js",
clean: true
},
optimization: {
minimizer: [
// 或者plugins 直接new也行 仅在production模式下
// new CssMinimizerPlugin(),
//压缩js插件
new terserWebPackPlugin({
parallel: threads //开启多进程
})
]
},
module: {
rules: [
{
oneOf: [
// 配置多进程打包
{
// 单文件css 把动态创建style变成link 需要改成插件
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"]
}
}
}]
},
{
test: /\.s[ac]ss$/,
use: getStyleLoader(["sass-loader"])
},
{
test: /\.less$/,
use: getStyleLoader(["less-loader"])
},
{
test: /\.(png|gif|svg|webg|jpe?g)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024
}
},
generator: {
filename: "static/images/[hash:10][ext]"
}
}, {
test: /\.(ttf|woff2?|map4|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:10][ext]"
}
},
{
test: /\.js$/,
// exclude和include只能用一种 eslintplugins也可以处理
include: path.resolve(__dirname, "src"),
// exclude: /node_modules/,
use: [
{
loader: "thread-loader",//开启多进程 eslint也可以开启
options: {
workers: threads
}
},
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启缓存babel
cacheCompression: false//关闭缓存文件压缩
}
}
],
}
]
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/index.html")
}),
new ESLintPlugin({
context: path.resolve(__dirname, "src"),
exclude: "node_modules",//默认值
cache: true,//开启eslint缓存
cacheLocation: path.resolve(__dirname, "./node_modules/.cache/eslint_cache"),//配置缓存路径
threads,//多进程
}),
// 将css单文件导出 需要在browserslist配置 一般为 last 2 version >1% notdead 意为 浏览器最近2版本兼容，百分之99%的浏览器 且notdead没有死亡
new MiniCssExtractPlugin({
filename: "static/css/main.css"
}), new CssMinimizerPlugin(),
],
// webpack serve 不会有输出dist
// 生产模式不需要
// devServer: {
// host: "localhost",
// port: "3000",
// open: true
// },
//production html和js会自动压缩
mode: "production",
// 生产模式，行和列都映射源代码 生成main.js.map文件
devtool: "source-map"
}
