从webpack中排除CSS中引用的图像

Question

我想在我的。css文件上使用webpack。但我希望它排除(不要工作)的任何图像。css文件引用。

。背景图片:url(. ./图片/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文件被更新以指向它们。例如26 c2a65f93c5caaf24ea5bc44d779d33.png

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

我真的希望js文件看起来像

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

我尝试排除:/.png$/，在第一个加载器。没有错误。但是新图像被创建，js被更新为指向新图像。

我知道可能有相对路径问题。但我可以解决。

谢谢。

Answer 1

我设法使用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模块本身的导入，我不知道这是否适合你的需要。

无论如何，也许你可以从这个例子中得到一个有用的提示。

Answer 2

好像已经修好了。

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

我没有要求就试过了。解决，但去一个错误。这将把文件放到与其同名的路径中