webpack 学起来不知道大家感觉怎么样,反正我学的 md ,想咬人
一方面文档有些说明不是很清楚,一方面配置太他么多了,记不住啊。记住有点不太实际,如果把平时整理好的配置记录下来,等到不满足需求了再去查文档
loader 及 插件的使用会在代码中注释
talk is cheap,show me the code
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { DefinePlugin } = require('webpack')
const isProduction = process.env.NODE_ENV;
module.exports = (env, argv) => {
const isProduction = env === 'production' ? true : false
console.log('isProduction',isProduction)
return {
entry: {
index: "./src/index.js",
print: "./src/print.js",
},
output: {
filename: "js/[name].[contenthash:4].js",
path: path.resolve(__dirname, "../dist"),
clean: true, // 清理dist 文件夹
},
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".vue"],
// alias: {
// '@': resolveApp('./src')
// }
},
plugins: [
new HtmlWebpackPlugin({
title: "Development",
template:'./public/index.html' // 默认应该是webpack—01/
}),
new CopyWebpackPlugin({ // 和上面的HtmlWebpackPlugin 重复了 会报错
patterns:[
{
from:'./public', // 需要使用globOptions.ignore 排除
// index.html 文件
globOptions:{
ignore:['**/index.html'] // 注意加上 **/
}
}
]
// to:'' 默认打包到dist 文件下 to 可以省略
}),
new DefinePlugin({ // 定义全局变量
BASE_URL:'"./"' // 注意里面也有 ""
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader
},
"css-loader"],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
parser: {
// 转base 64 条件
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
},
},
generator: {
filename: "imgs/[contenthash:4][ext][query]", // 输出到dist/images
},
},
{
test: /\.js$/,
//使用include来指定编译文件夹
// cache-loader thread-loader 用来 提升打包性能
include: path.resolve(__dirname, "../src"),
exclude: /node_modules/,
use: ["cache-loader", "thread-loader", "babel-loader"],
},
],
}
};
};
还有一些常见的 loader 大家可以自行加上去 如 postcss-loader 、less-loader 等等以后会慢慢补全
下一篇:webpack 开发环境常用配置