webpack配置less以及js中引入的图片问题
1.问题重现
当我做了这个配置以后，发现less里的图片可以正常展现到页面，但是js里的图片以及其他文件都不能正常展现，都报404
原始配置如下：
// 如果有額外的.babelrc配置的話就可以使用這段代碼1
// module.exports = {
// module: {
// rules: [
// {
// test:/\.jsx?$/,
// use: ['babel-loader'],
// exclude:/node_modules/ //排除 node_modules目錄
// }
// ]
// }
// }
// 如果有額外的.babelrc配置的話就可以使用這段代碼2
// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼1
//webpack.config.js
// 首先引入插件1
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = (process.env.NODE_ENV.trim()) === "development"; //html-webpack-plugin 的 config 的妙用4-1
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//清理dist目錄的插件
const path = require('path');//設置出口使用
const config = require('./public/config')[isDev ? 'dev' : 'build'];//html-webpack-plugin 的 config 的妙用4-2
module.exports = {
entry: './src/index.js', //webpack的默認配置，也可以寫一個數組
output: {
path: path.resolve(__dirname, 'dist'), //必須是絕對路徑
// filename: 'bundle.js',
// filename: 'bundle.[hash].js',
filename: 'bundle.[hash:6].js',//考虑到CDN缓存的问题，我们一般会给文件名加上 hash
// publicPath: '../' 打包上线之前要改一下这个哦
},
mode: isDev ? 'development' : 'production',//html-webpack-plugin 的 config 的妙用4-3
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"],
plugins: [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
},
exclude: /node_modules/
},
{
//看清楚啦 這裡有四個loaderloader 的执行顺序是从右向左执行的，也就是后面的 loader 先执行，上面 loader 的执行顺序为: less-loader ---> postcss-loader ---> css-loader ---> style-loader
test: /\.(le|c)ss$/,
use: [
'style-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')({
'overrideBrowserslist':[
'>0.25%','not dead'
]
})
]
}
}
}, 'less-loader'],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|gltf|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
// options: {
// limit: 10240, //10K
// esModule: false
// }
// ,
// 使用上面的那一段運行後會把圖片名字改為MD5哈希值，使用下面的會保留原有名稱加上六位哈希值
options: {
limit: 10240, //10K
// publicPath: './src/',
esModule: false,
name: '[name]_[hash:0].[ext]',
outputPath: 'assets' //這個可以將打包後的資源放到指定的文件夾下
}
}
],
exclude: /node_modules/
}
// {
// test: /\.html$/,
// use: 'html-withimg-loader'
// },
]
},
plugins: [
// 數組，放著所有的webpack插件
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
config: config.template, //html-webpack-plugin 的 config 的妙用4-4
minify: {
removeAttributeQuotes: false ,//是否刪除屬性的雙引號
collapseWhitespace: false, //是否折疊空白
},
hash: true //是否加上hash,默認是false
}),
new CleanWebpackPlugin(), //清理dist目錄插件，不需要傳參數，它自己可以找到outPath
// new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['**/*','!dll','!dll/**']}) //如果你有需要不刪除dll目錄下的文件的話可以這樣子寫
],
devServer: {
port: '8080', //默認是8080
quiet: false, //默認不啟動
inline: true, // 默認開啟inline 模式，如果設置為false, 開啟 iframe模式
stats: 'errors-only', //終端僅僅打印 error
overlay: false, //默認不啟用
clientLogLevel: 'silent', //日誌等級
compress: true //是否啟用gzip壓縮
},
devtool: 'cheap-module-eval-source-map' //开发环境下使用
}
// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼2
index.less 图片可以正常显示到页面
@color: red;
body{
div{
color: @color;
transition: all 2s;
}
background: url('./assets/img/mya.png');
.panel {
border: 0;
width: 400px;
font-size: 30px;
line-height: 31px;
text-indent: 20px;
}
body,#webglCanvas {
width: 100%;
height: 100vh;
overflow: hidden;
}
}
js里的写法如下
const { texture: texture5, mesh: mesh5 } = await aaaaaa(
{ url: '../assets/img/testImg/testpng/color2.png' },
[[-1500, -5, 1500], [900, -5, -400]]
);
解决方案如下：
1.执行命令npm i copy-webpack-plugin --save
这里需要注意的是： 这个包存在兼容问题，可能会报错：compilation.getCache is not a function，如果报错就换个版本就行了，尝试执行npm i copy-webpack-plugin@6.0.2 --save
2.进入webpack.config.js里，添加如下代码
const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin({
patterns: [
{
from: 'src/assets/',
to: 'assets/'
},
],
})
