I made a simple pop-up component used by the project as a plug-in and submitted it to npm.
but after I installed it, I found that the path reference to the image resource was incorrect, and I couldn"t find the picture for the plug-in.
check the code and find that the image has been packaged under the dist/ file and has not been converted into base64 and incorporated into the code. The
plug-in uses the vue-cli init webpack-simple command to create the project, and the configuration file in webpack.config.js is as follows:
var path = require("path")
var webpack = require("webpack")
const NODE_ENV = process.env.NODE_ENV
module.exports = {
entry: NODE_ENV == "development" ? "./src/main.js" : "./src/lib/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
library: "easy-layer",
libraryTarget: "umd",
filename: "easy-layer.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
"vue-style-loader",
"css-loader"
],
}, {
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]"
}
}
]
},
resolve: {
alias: {
"vue$": "vue/dist/vue.esm.js"
},
extensions: ["*", ".js", ".vue", ".json"]
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: "-sharpeval-source-map"
}
if (process.env.NODE_ENV === "production") {
module.exports.devtool = "-sharpsource-map"
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: ""production""
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
I have tried to modify
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]"
}
}
added the limit parameter, but had no effect.
tried not to write any code, only to write a css and, reference logo.png, packaging did not convert image resources.
how to solve this problem?