css - 从 webpack 中排除 css 中引用的图像

Question

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

即背景图像: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 已更新以指向新图像。

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

谢谢。

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 模块本身，我不知道这是否符合您的需求。

无论如何，也许您可​​以通过这个示例获得有用的提示。