從webpack中排除在css中引用的圖像

我正在綁定在我的.css文件上使用webpack。但我希望它排除（不要處理）.css文件引用的任何圖像。從webpack中排除在css中引用的圖像

即background-image：url（../ images/icon_check.png）;應該沒有做任何事情。

在我webpack.config.js看起來像

"use strict"; 
module.exports = { 
entry: { 
    index: "./src/main/webapp/core/index.js", 
    login: "./src/main/webapp/core/login.js", 
    siteEditorAdmin: "./src/main/webapp/core/siteEditorAdmin.js" 
}, 
output: { 
    path: __dirname + "/src/main/webapp/core/scripts", 
    filename: "[name].js" 
}, 
module: { 
    loaders: [ 
     // Extract css files 
     { test: /\.css$/, loader: "style!css" }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/, 
      loader: 'file-loader' 
     } // IMAGES 
    ] 
}, 
amd: { jQuery: true }, 
devtool: "eval-source-map" 
};

如果我沒有第二裝載機，我感到我需要一個加載器錯誤。

如果我有第二個加載器，錯誤消失。但是圖像被創建/散列並且js文件被更新以指向它們。即26c2a65f93c5caaf24ea5bc44d779d33.png

eval("module.exports = __webpack_require__.p + \"26c2a65f93c5caaf24ea5bc44d779d33.png\ ....

我真的很喜歡這個js文件看起來像

eval("module.exports = __webpack_require__.p + \"/images/icon_check.png\....

我試過排除：/.png$/，在第一加載器。沒有錯誤。但新圖像被創建並且js被更新爲指向新圖像。

我知道可能存在相對路徑問題。但我可以修復。

謝謝。

來源

2016-09-06 user1594067

好像我修好了。

{ test: /\.css$/, loader: "style!css" }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/, 
      loader: require.resolve("file-loader") + "?name=../[path][name].[ext]" 
     }

我試過沒有require.resolve但是出錯了。這將會把文件中的路徑與它有

來源

2016-09-07 15:55:46 user1594067

我成功地做到這一點使用extract-text-webpack-plugin相同的名字，我的配置是這樣的：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './src/js/index.js', 
    output: { 
    filename: 'main.js', 
    path: path.resolve(__dirname, 'public/js') 
    }, 
    module: { 
    rules: [ 
     // ... other rules here 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract({ 
      use: [{ 
      loader: "css-loader", 
      options: { url: false } 
      }] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('../css/main.css') 
    ] 
};

請注意，我的做法是加載所有CSS文件作爲JS模塊本身內的導入，我不知道這是否符合您的需求。

無論如何，你可以通過這個例子得到一個有用的提示。

來源

2017-12-28 18:19:44

從webpack中排除在css中引用的圖像

回答

相關問題