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\....

我在第一个加载器中尝试了一个exclude：/. 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]"
        }

我在没有require.resolve的情况下尝试了它，但是出错了。这会将文件放在路径中，其名称与

相同

从webpack

2 个答案: