How to configure image-webpack-loader? in vue-cli3

image-webpack-loader was previously configured in webpack.base.config.js:

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: "url-loader",
    options: {
      limit: 10000,
      name: utils.assetsPath("img/[name].[hash:7].[ext]")
      }
    },
    {
      loader: "image-webpack-loader",
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

there is no local configuration for using vue-cli3. It is configured in vue-config.js on the official website, but how should it be configured? Have you ever used it?

Webpack vue.js

Aug.30,2021

landlord, hello ~
try this one below, you can test it yourself. Finally, you can verify

with the command vue-cli-service inspect .

   
 the transformation of the first question, you can see that the path of the final img output is not processed. See if there are any other changes .
< hr >
 if it is helpful, please click to adopt it, thank you ~



Previous: What do you do when img blocks background?
Next: Vue cross-domain local node server







Webpack separates and packages the image referenced in css,css separately. How to solve this problem?

now my project is to package css and js separately, and the directory structure after packaging is the same as before.
before packing:
csscssimages.. csscss.. ..
:
webpack.config.js
csscss
csscss
I would like to ask all the great gods, what ...


Webpack
vue.js
javascript


Feb.28,2021




What is the role of node in vue scaffolding webpack configuration?
 question: when I use vue2.5.2 scaffolding to generate a webpack project, I find that it has a configuration node under the automatic generation file build webpack.base.conf.js. What is it and what is it for? ...


Webpack
vue.js


Feb.28,2021




Vue project cannot run problem
 it was fine when the computer was turned off yesterday, and that s how it started today ...


Webpack
vue.js


Feb.28,2021




Webpack packaged the vue project, but the template content of vue was not displayed.

just started to learn the project development of webpack+vue, and ran it with webpack-dev-server after configuration, but there was nothing wrong with the page. I ve been looking for it for two days and I still don t know why.
here is the code
pac...


Webpack
vue.js
javascript


Feb.28,2021




Vue project, why the common code mainfest is not added to the index.html packaged by webpack

after the vue project is packaged, run the report: webpackjsonp is not defined
webpack.prod.conf.js
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === testing
? index.html
: config.build.index,
template...


Package
webpack
vue.js


Feb.28,2021




How does vue turn off e2e testing

I accidentally typed a y while installing scaffolding, so I installed e2e .
ask you how to delete this
report a lot of errors if this folder is deleted directly
...


Webpack
vue.js


Feb.28,2021




Npm run dev
 is npm run dev a service? why can t you use the mobile phone of the same router to access the computer s ip plus port? ...


Node.js
npm
webpack
vue.js
javascript


Feb.28,2021




Vue2.0 high imitation music webApp cross-domain acquisition of data
 recently I watched the teaching video of vue2.0 high imitation music webapp, but because the version of vue-cli (vue-cli version is 2.8.2) is different, there is no dev-server.js file in my build directory. On the video, the request for cross-domain da...


Node.js
webpack
vue.js


Feb.28,2021




A quill-image-extend-module component in vue-quill-editor has a packaging error

mistakes in packing Times are as follows:
but it can be used normally in development mode. Refer to the website that you want to configure es2015, in .babelrc, but I have already configured .
{
"presets": [
["env", {
...


Webpack
vue.js


Mar.01,2021




App.vue introduces global less unavailability issues

less-loder has been installed
theme.less
@wid:1000px;
App.vue
<style lang="less">
@import . style theme.less ;
< style>
search.vue
<style lang= less scoped>
.dataSearch {
width: @wid;
}
< style>
...


Front-end
webpack
vue.js
less


Mar.01,2021




How does vue-cli get the pictures under static?

items are listed below: screenshot 2018-04-04 4.37.25 p.m.
set in config index.js
build:{
assetsSubDirectory: static ,
assetsPublicPath: ,
}
then get logo.png in the vue file
data(){
return {
logoSrc: require( s...


Webpack
vue.js


Mar.01,2021




How to use the server's system environment variables in configuration files such as vue,webpack project, prod.env.js under config, etc.

what is written in the configuration file directly is the private network url, but now you want to use the environment variables configured on the server instead. How to modify it
module.exports = {
NODE_ENV: "production" ,
ENV_CONFIG: ...


Javascript
webpack
vue.js


Mar.01,2021




Vue made a lot of mistakes.

exactly what went wrong, it is not very clear
...


Html
front-end
webpack
vue.js


Mar.01,2021




Vue picture path problem

the directory structure is as follows
1. I try to put pictures directly into index.html, using the absolute path in static can be achieved, but loading pictures in assets is not good, and the relative path is useless, how to achieve html files if you...


Webpack
vue.js
javascript


Mar.02,2021




Nuxt.js uses less-loader to load less styles and finds out why variables cannot be loaded.

my global variable configuration vue
:@base-color-red
less@
...


Nuxt.js
webpack
vue.js


Mar.02,2021




How to correctly add `'@': resolve ('src') `?

in webpack.base.config.js , why do I add @ : resolve ( src ) in resolve -> alias npm run dev ?
...
resolve: {
extensions: [ .js , .vue ],
alias: {
vue : vue dist vue.esm.js ,
@ : resolve( src )
}
}...


Webpack
vue.js


Mar.02,2021




How to package components with vue webpack-simple in order to use them directly

I want to make a vue component by myself, but if I want to mention it separately, I can put it in other projects. Other projects use cdn, so I want to make a plug-in like JQ, as long as I reference vue.js and my compiled components. it s a pity that I...


Javascript
webpack
vue.js


Mar.02,2021




Vue webpack newly built project build reports an error after packaging
 vue init webpack project npm run build after reporting an error Failed to load resource: the server responded with a status of 404 (Not Found), has any friend ever encountered such a problem? ...


Webpack
vue.js


Mar.02,2021




Element-ui brings in components on demand

when you open the page after it is introduced on demand, it will prompt you for about 3 seconds
console does not show throw error, black question mark face!
...


Webpack
vue.js
element-ui


Mar.02,2021




Vue configure css background map path and packaging path conflict

the reason for the loss of css background image after packaging is due to under build.
assetsPublicPath: , but the solution to the blank screen after the project is packaged is to set assetsPublicPath to . . How to solve this
...


Webpack
vue.js


Mar.02,2021






False


Django, Why does the system automatically generate an empty session? every time the request is made?


Use python to convert dict1 to dict2, in the example. I tried for a long time but couldn't find a solution.


How to self-start the php-fpm service when building a LNMP environment with docker?


Can an array in react state be bound to a dom state using an element in the array?


Wechat browser version 6.6.5 cannot prevent the springback of pull-up and drop-down to the top under ios system.


In express+hbs, how do you define the routed data as a variable on the page?


How to use symbol reference of Iconfont in dva


How to elegantly add data to JSON objects?


Using node to build video streaming server


The proportional width of the echarts graph is inconsistent.


React uses axios to call the background data. After success, how to jump to the page based on the returned value?


I don't understand what a linux command means. Please explain it.


Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.


Running nodejs reports fewer errors ")"



css
mysql
arrays
josn
react
html
typescript
webpack
npm
sass
R
objective-c
.net
sql-server
jquery
python-3.x
angularjs
django
angular
excel
regex
iphone
ajax
linux
xml
pandas
vba
spring
database
wordpress
string
wpf
xcode
windows
bash
postgresql
oracle
multithreading
eclipse
list
firebase
algorithm
macos
forms
image
scala
visual-studio
azure
bootstrap
spring-boot
react-native
python-2.7
docker
performance
function
winforms
matlab
powershell
apache
dataframe
api
sqlite
numpy
rest
shell
selenium
flutter
dart
maven
loops
qt
swing
android-studio
csv
express
file
class
tensorflow
sorting
codeigniter
perl



Html page adapts to iphonex


Write the modal component of iview to the problem that cannot be opened by clicking on the subcomponent


Centos 7 error can not resolve host


After antPro (react) is compiled, the access page is blank, and there is workbox information in the console.


Write wx is not allowed when using plugins at app.json




© 2021 CodesHelper


Advertising
Contact us
About us


Menu