Home Web Front-end JS Tutorial How to solve the problem of configuring the packaging file path

How to solve the problem of configuring the packaging file path

Jun 04, 2018 pm 03:33 PM
Error document path

This time I will show you how to solve the problem of configuring the packaging file path. What are the precautions for solving the problem of configuring the packaging file path? The following is a practical case, let's take a look.

Problem

The project works normally in the development environment. After packaging, the

picture disappears. After checking the element, it is found that the path is wrong.

The image path is like this:

background: url(/static/img/bg_camera_tip.bd37151.png), but the file does not exist in this path.

The packaged file directory is as follows:

You can see that the path of the background image should be ../../static but it is actually /static. Once you find the cause, it will be solved.

Method 1

Check the configuration of webpack.base.conf.js in the build directory. The image file will be processed by url-loader.

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }
Copy after login
Its function is to return a base64 string when the file size is less than the limit limit. In fact, it encodes the image resource into a base64 string and puts it in the CSS file. This can reduce one network request because each Each picture needs to be downloaded from the server. However, if the file is too large, the base64 string will be very long. If placed in the CSS file, the file will be very large. The

file download time of the CSS will become longer, and the gain will outweigh the loss, so there will be a limit Parameters within this range will be converted into a base64 string, and its unit is bytes. For this problem, the loader also provides a publicPath parameter, which is used to modify the referenced image address. The default is the current path, so just change it directly, that is, add a parameter publicPath: '../.. under the options node. /'.

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     publicPath: '../../', //你实际项目的引用地址前缀
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }
Copy after login

Method 2

There is also a rule in webpack.base.conf.js. Each vue file will be processed by vueLoaderConfig

 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   ...
  ]
 }
Copy after login
vueLoaderConfig Located in build/vue-loader.conf.js, it calls the cssLoaders method of build/utils.js.

  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  }
Copy after login
If the options.extract value in the production environment is true, the ExtractTextPlugin plug-in will be called for processing. Its function is to extract the style files referenced in the project into an independent CSS file, so that it can be Loading all CSS files is equivalent to loading CSS files in parallel, which can reduce the number of network requests. For more advantages and uses, see ExtractTextWebpackPlugin. Back to this question, it also has another parameter, publicPath, which can override the publicPath configuration of the specified loader. Then, just like the previous configuration, the path address of the reference file can be uniformly configured for all loaders.

In addition, the user:loader here actually returns a series of loader collections, and the return of cssLoaders is

 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }
Copy after login
This means that even if you do not configure it in webpack.base.conf.js The reason why sass-loader can also use SASS syntax.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue interceptor compatibility processing

How to print log information in console

The above is the detailed content of How to solve the problem of configuring the packaging file path. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to recover expired WeChat files? Can expired WeChat files be recovered? How to recover expired WeChat files? Can expired WeChat files be recovered? Feb 22, 2024 pm 02:46 PM

How to recover expired WeChat files? Can expired WeChat files be recovered?

Photos cannot open this file because the format is not supported or the file is corrupted Photos cannot open this file because the format is not supported or the file is corrupted Feb 22, 2024 am 09:49 AM

Photos cannot open this file because the format is not supported or the file is corrupted

Can Tmp format files be deleted? Can Tmp format files be deleted? Feb 24, 2024 pm 04:33 PM

Can Tmp format files be deleted?

How to transfer files from Quark Cloud Disk to Baidu Cloud Disk? How to transfer files from Quark Cloud Disk to Baidu Cloud Disk? Mar 14, 2024 pm 02:07 PM

How to transfer files from Quark Cloud Disk to Baidu Cloud Disk?

What to do if the 0x80004005 error code appears. The editor will teach you how to solve the 0x80004005 error code. What to do if the 0x80004005 error code appears. The editor will teach you how to solve the 0x80004005 error code. Mar 21, 2024 pm 09:17 PM

What to do if the 0x80004005 error code appears. The editor will teach you how to solve the 0x80004005 error code.

What is hiberfil.sys file? Can hiberfil.sys be deleted? What is hiberfil.sys file? Can hiberfil.sys be deleted? Mar 15, 2024 am 09:49 AM

What is hiberfil.sys file? Can hiberfil.sys be deleted?

How to install GHO files How to install GHO files Feb 19, 2024 pm 10:06 PM

How to install GHO files

Different uses of slashes and backslashes in file paths Different uses of slashes and backslashes in file paths Feb 26, 2024 pm 04:36 PM

Different uses of slashes and backslashes in file paths

See all articles