Question

我有这个webpack配置

var Webpack = require("webpack");
var Path = require("path");
var OutputPath = "build";

module.exports = {

    entry: "./src/app.tsx",
    output: {
        path: Path.join(__dirname, OutputPath, "" + process.env.NODE_ENV),
        publicPath: "",
        filename: "bundle.js"
    },

    devtool: "source-map",

    devServer: {
        contentBase: OutputPath
    },

    resolve: {
        extensions: ["", ".ts", ".tsx", ".webpack.js", ".web.js", ".js", ".html"],
        alias: {
            jquery: "jquery/src/jquery"
        }
    },

    node: {
        fs: "empty"
    },

    module: {
        loaders: [
        { test: /\.tsx?$/, loader: "ts-loader" },
        { test: /\.html$/, loader: "html-loader!file-loader?name=[name].[ext]" },

        { test: /\.ejs$/, loader: "ejs-loader" },

        {
            test: /\.svg$/,
            loaders: [
                "url-loader?limit=100000&name=assets/[name].[hash].[ext]",
                "image-webpack?bypassOnDebug=false&optimizationLevel=7&interlaced=false"
            ]
        },
        {
            test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot|ico)$/,
            loader: "url-loader?limit=100000&name=assets/[name].[hash].[ext]"
        }, 
,
        {
            test: /\.css$/,
            exclude: /.*onsenui.*$/,
            loader: "ignore-loader"
        }
,
        {
            test: /\.(less|css)$/,
            exclude: /.*(font_awesome|ionicons|iconic-font).*$/,
            loader: "style-loader!css-loader?-import!less-loader!postcss-loader"
        }
        ],
    }
};

应用程序建立在onsenui上，我试图忽略来自css import的特定文件名。

@import url("font_awesome/css/font-awesome.min.css");
@import url("ionicons/css/ionicons.min.css");
@import url("material-design-iconic-font/css/material-design-iconic-font.min.css");

...

我们可以注释掉具体的行，但我们不希望每次更新npm包都这样做。

有谁知道，如何忽略css导入？

Answer 1

最后我刚安装了“string-replace-webpack-plugin”并使用这种方式。

var StringReplacePlugin = require("string-replace-webpack-plugin");

然后将该插件添加到预加载器中就可以完成工作了

preLoaders: [
        {
        test: /onsenui\.css$/,
        loader: StringReplacePlugin.replace({
            replacements: [
                {
                    pattern: /.*(@import).*/ig,
                    replacement: function (match, p1, offset, string) {
                        return "/*/";
                    }
                }
            ]}),
            include: /node_modules\\onsenui.*/
        }
]

忽略来自webpack config的css文件中的特定@import

1 个答案: