从Webpack中排除在CSS中引用的图片

Question

我想在我的 .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代码。

我知道可能会存在相对路径问题，但我可以解决。

谢谢。

- user1594067

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')
   ]
};

请注意，我的做法是在JS模块中以导入的形式加载所有CSS文件，不知道这是否符合您的需求。

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

- Amy Pellegrini

Answer 2

看起来我已经解决了它。

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

我尝试过不使用require.resolve，但是出现了错误。这将把文件放置在与其原始名称相同的路径中。

- user1594067