webpack file-loader 解析 css 文件中 background-image路徑問題。

2024-04-27 15:08:35

字體：大中小

來源：轉載

供稿：網友

webpack file-loader 解析 CSS 文件中 background-image路徑問題。

通過 webpack 的 file-loader 把 css 中的 background-image 圖片提取出來構建到輸出目錄（例如dist或者build目錄），發現圖片被生成在了產出目錄的根目錄。

webpack.config.js文件配置

var webpack = require('webpack');var vue = require('vue-loader');var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin'), ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { //devtool: 'eval-source-map', entry: "./js/app.js", output: { path: './__build__', filename: 'js/shared.js', }, resolve: { alias: { 'src': path.resolve(__dirname, './resources'), 'vue': 'vue/dist/vue.min' } }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [{ test: //.vue$/, loader: 'vue' }, { test: //.js$/, exclude: /node_modules|vue//dist|vue-router//|vue-loader//|vue-hot-reload-api///, loader: ['babel-loader'], query: { PResets: ['es2015'] } }, {test: //.json$/,loader: "json"}, {test: //.css$/, loader: "style!css" }, {test: //.less$/,loader: 'style!css!less'}, {test: //.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=4192&name=[path][name].[ext]' },//limit參數，代表如果小于大約4k則會自動幫你壓縮base64編碼的圖片 /*{ test: //.(png|jpe?g|gif|ico)(/?/S*)?$/, loader: 'file-loader', query: { name: 'img/[name].[ext]' } },*/ {test: //.(otf|eot|ttf)$/, loader: "file?prefix=font/" }, {test: //.svg$/, loader: "file" }] }, vue: { loaders: { css: ExtractTextPlugin.extract('css-loader?sourceMap'), sass: ExtractTextPlugin.extract('css-loader?sourceMap!sass-loader?sourceMap') } }, babel: { presets: ['es2015', 'stage-3'], plugins: ['transform-runtime'] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new ExtractTextPlugin('[name]-[hash:3].css') ]};