webpack5基础配置
webpack作为现代前端开发中最火的模块打包工具，广泛应用于前端工程领域，是前端工程师必备的技能之一。
以下是我个人针对开发环境和生产环境写的一些webpack基础配置，希望能帮助一些同学：
（开发环境）webpack.dev.js：
const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口
entry: "./src/main.js", //相对路径
// 输出
output: {
// 文件输出路径
// __dirname node.js的变量，代表当前文件的文件夹目录
path: undefined,
// 文件名
filename: "static/js/main.js",
// 在打包前把path目录清空，然后在重新打包
// clean: true
},
// 加载器
module: {
rules: [
{
test: /\.css$/, //只检测.css文件
use: [
"style-loader",//将js中的css通过创建style标签添加html文件中生效
"css-loader" //将css资源编译成common.js的模块到js中
] // 执行顺序，从右到左从上到下
},
{
test: /\.less$/, //只检测.less文件
use: [
"style-loader",
"css-loader",
"less-loader"
] // 执行顺序，从右到左从上到下
},
{
test: /\.s[ac]ss$/, //只检测.sass、scss文件
use: [
"style-loader",
"css-loader",
"sass-loader"
] // 执行顺序，从右到左从上到下
},
{
test: /\.styl$/, //只检测.styl文件
use: [
"style-loader",
"css-loader",
"stylus-loader"
] // 执行顺序，从右到左从上到下
},
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
//小于10kb的转换我base64
maxSize: 10 * 1024
}
},
generator: {//图片打包目录
// hash：x 只取几位
filename:"static/images/[hash:10][ext][query]"
}
},
{
test: /\.(ttf|woff2?|map3|map4|avi)$/,
type: 'asset/resource',
generator: {//字体打包目录
// hash：x 只取几位
filename:"static/media/[hash:10][ext][query]"
}
},
{
test: /\.js$/,
exclude: /(node_modules)/, //排除node_modules中的js文件
use: {
loader: 'babel-loader',}
}
]
},
// 插件
plugins: [
new ESLintPlugin({
context:path.resolve(__dirname,"../src")
}),
new HtmlWebpackPlugin({
template:path.resolve(__dirname,"../public/index.html")
})
],
// 开发配置
devServer: {
host: "localhost",
port: "3000",
open:true,
},
// 模式
mode: 'development'
}（生产环境）webpack.prod.js：
const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
function getStyleLoader(pre) {
return [
MiniCssExtractPlugin.loader,//将js中的css通过创建style标签添加html文件中生效
"css-loader", //将css资源编译成common.js的模块到js中
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env",
]
}
}
},
pre,
].filter(Boolean) // 执行顺序，从右到左从上到下
}
module.exports = {
// 入口
entry: "./src/main.js", //相对路径
// 输出
output: {
// 文件输出路径
// __dirname node.js的变量，代表当前文件的文件夹目录
path: path.resolve(__dirname, "../dist"), // 绝对路径
// 文件名
filename: "static/js/main.js",
// 在打包前把path目录清空，然后在重新打包
clean: true
},
// 加载器
module: {
rules: [
{
test: /\.css$/, //只检测.css文件
use: getStyleLoader()
},
{
test: /\.less$/, //只检测.less文件
use: getStyleLoader("less-loader")
},
{
test: /\.s[ac]ss$/, //只检测.sass、scss文件
use: getStyleLoader("sass-loader")
},
{
test: /\.styl$/, //只检测.styl文件
use: getStyleLoader("stylus-loader")
},
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
//小于10kb的转换我base64
maxSize: 10 * 1024
}
},
generator: {//图片打包目录
// hash：x 只取几位
filename:"static/images/[hash:10][ext][query]"
}
},
{
test: /\.(ttf|woff2?|map3|map4|avi)$/,
type: 'asset/resource',
generator: {//字体打包目录
// hash：x 只取几位
filename:"static/media/[hash:10][ext][query]"
}
},
{
test: /\.js$/,
exclude: /(node_modules)/, //排除node_modules中的js文件
use: {
loader: 'babel-loader',}
}
]
},
// 插件
plugins: [
new ESLintPlugin({
context:path.resolve(__dirname,"../src")
}),
new HtmlWebpackPlugin({
template:path.resolve(__dirname,"../public/index.html")
}),
new MiniCssExtractPlugin({
filename:'static/css/main.css'
}),
new CssMinimizerPlugin()
],
// 模式
mode: 'production'
}