110 lines
3.8 KiB
JavaScript
110 lines
3.8 KiB
JavaScript
/**
|
||
* webpack 配置文件
|
||
*
|
||
* @author coder-xiaomo
|
||
* @date 2022-05-17
|
||
*/
|
||
|
||
const { resolve } = require('path');
|
||
|
||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||
|
||
module.exports = {
|
||
// 入口起点
|
||
entry: {
|
||
html: "./src/index.html",
|
||
style: "./src/webpack-style.js",
|
||
// script: "./src/webpack-script.js",
|
||
},
|
||
// 输出
|
||
output: {
|
||
// 输出文件名
|
||
filename: 'assets/js/built.[contenthash:8].js',
|
||
chunkFilename: 'assets/js/[id].[contenthash:8].js',
|
||
// 输出路径 __dirname: 当前文件的目录绝对路径
|
||
path: resolve(__dirname, 'dist')
|
||
},
|
||
// loader配置
|
||
module: {
|
||
rules: [
|
||
// 详细配置
|
||
// {
|
||
// // 匹配文件
|
||
// test: /\.css$/,
|
||
// // 使用哪些 loader 进行处理
|
||
// use: [ // 执行顺序：从后往前
|
||
// // 'style-loader', // 创建 style 标签并插入
|
||
// MiniCssExtractPlugin.loader, // 将 css 从 js 文件中提取出来（替代 'style-loader' ）
|
||
// 'css-loader' // 将 css 文件编程 commonjs 模块加载到 js 中（样式字符串）
|
||
// ]
|
||
// },
|
||
{
|
||
// 匹配文件
|
||
test: /\.css$/,
|
||
// 使用哪些 loader 进行处理
|
||
use: [
|
||
MiniCssExtractPlugin.loader,
|
||
'css-loader'
|
||
]
|
||
},
|
||
// {
|
||
// test: /\.(jpg|png|gif)$/,
|
||
// loader: 'url-loader',
|
||
// options: {
|
||
// // 图片小于 8KB，则使用 base64 处理（减少请求数量）
|
||
// limit: 8 * 1024,
|
||
// // 问题：url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
|
||
// // 解析时会出问题: [object Module]
|
||
// // 解决：关闭ur1-loader的es6模块化，使用commonjs解析
|
||
// esModule: false,
|
||
|
||
// // 给图片进行重命名
|
||
// // [hash:10] 取图片的 hash 的前10位
|
||
// // [ext] 取文件原来扩展名
|
||
// name: '[hash:10].[ext]',
|
||
// outputPath: "assets/image"
|
||
// }
|
||
// },
|
||
{
|
||
test: /\.html/,
|
||
// 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 处理）
|
||
loader: 'html-loader'
|
||
},
|
||
// 打包其他资源
|
||
{
|
||
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
|
||
loader: 'file-loader',
|
||
options: {
|
||
name: '[hash:10].[ext]',
|
||
outputPath: "assets/others"
|
||
}
|
||
},
|
||
]
|
||
},
|
||
// plugin配置
|
||
plugins: [
|
||
// 创建一个html，自动引入打包的所有资源
|
||
new HtmlWebpackPlugin({
|
||
template: './src/index.html',
|
||
inject: 'body',
|
||
scriptLoading: 'blocking'
|
||
}),
|
||
new MiniCssExtractPlugin({
|
||
filename: "assets/css/built.[contenthash:8].css"
|
||
}),
|
||
new CleanWebpackPlugin()
|
||
],
|
||
// 模式
|
||
// mode: 'development',
|
||
// mode: 'production',
|
||
|
||
// 开发服务器 只会在内存中编译打包，不会有任何输出
|
||
devServer: {
|
||
static: resolve(__dirname, 'dist'), // 项目构建后路径
|
||
compress: true, // 启动 GZIP 压缩
|
||
port: 3000,
|
||
open: true // 自动打开浏览器
|
||
}
|
||
} |