使用file-loader和url-loader
npm install --save-dev file-loader url-loader
配置文件:
const path = require("path");
const uglifyjs = require('uglifyjs-webpack-plugin'); //压缩js插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //打包css插件
module.exports = {
mode: "development", //打包为开发模式
entry: "./src/js/main", //入口文件,从项目根目录指定
output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
filename: "main.js"
},
module: {
rules:[
//打包css的图片,图片大小小于limit设置的8192B的会转化成base字符串引入,减少请求
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit:8192,
outputPath:'../img/'
}
}
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true
}
},
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: './src/index.html', //指定要打包的html路径和文件名
filename:'../index.html' //指定输出路径和文件名
}),
new uglifyjs(),
new MiniCssExtractPlugin({
filename: "../css/styles.css" //如果需要将css文件单独放入css文件夹中需要../
})
]
}
最终输出目录: