webpack文件夹打包_webpack打包图片没有出现在dist文件夹中

loader配置如下

{

test: /\.(png|jpg|gif)$/i,

use: [

{

loader: "url-loader",

options: {

limit: 10000,

name: 'assets/[name].[ext]'

}

},

{loader: "image-webpack-loader"}

]

},

目录结构如下

webpack文件夹打包_webpack打包图片没有出现在dist文件夹中_第1张图片

下面是全部的代码

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: "./src/js/script.js",

output: {

path: path.resolve(__dirname, 'dist/js'),

filename: "js/[name].bundle.js",

},

module: {

rules: [

{

test: /\.js$/,

loader: "babel-loader",

include: path.resolve(__dirname, "src"),

exclude: path.resolve(__dirname, 'node_modules'),

options: {

presets: ['latest']

}

},

{

test: /\.html$/,

loader: "html-loader"

},

{

test: /\.css$/,

include: path.resolve(__dirname, "src"),

exclude: path.resolve(__dirname, 'node_modules'),

loader: ["style-loader", "css-loader"]

},

{

test: /\.(png|jpg|gif)$/i,

use: [

{

loader: "url-loader",

options: {

limit: 10000,

name: 'assets/[name].[ext]'

}

},

{loader: "image-webpack-loader"}

]

},

]

},

plugins: [

new htmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: 'body'

}),

]

};

补充:图片大小为4k,控制台没报错

webpack文件夹打包_webpack打包图片没有出现在dist文件夹中_第2张图片

你可能感兴趣的:(webpack文件夹打包)