如何使用Webpack添加jquery-ui的CSS和图片

Question

我正在使用webpack和jquery-ui，但在如何从node_modules文件夹中加载打包的css和图像方面遇到了问题。

我有自己的scss文件，但还需要加载jquery-ui css。为了实现这一点，我添加了以下webpack配置规则。

{
    test: /\.scss$/,
    include: [
        path.resolve(__dirname, "client/css/scss"),
    ],
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }]
},
{
    test: /all\.css$/,
    include: [
        path.resolve(__dirname, "node_modules/jquery-ui/themes/base"),
    ],
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }]
}

注意版本：

"jquery": "3.2.1",
"jquery-ui": "1.12.1",

接下来是我的JavaScript入口文件：

require("../css/scss/main.scss");
require("../../node_modules/jquery-ui/themes/base/all.css");

然而，在构建时出现以下错误：

ERROR in ./node_modules/jquery-ui/themes/base/images/ui-icons_777620_256x240.png 模块解析失败： /home/anders/Code/imjustworking/node_modules/jquery-ui/themes/base/images/ui-icons_777620_256x240.png 意外字符 '�' (1:0)

所以我认为我需要一些额外的png加载器：

{ test: /.png$/, include: [ path.resolve(__dirname, "node_modules/jquery-ui/themes/base/images"), ], use: { loader: "url-loader?limit=100000" } }

但是我遇到了我不想改变的策略：

拒绝加载图片 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAADwCAMAAADYSUr5AAABDlBMV…MDrH4y9V+CDsjWf1nOApn6L+F1gNV/F48BB4BR+zUwcIfzP/8S/ZOlvFfuAAAAAElFTkSuQmCC' ，因为它违反了以下内容安全策略指令： "img-src 'self'"

这就是我现在的情况。我确实发现了一些其他的示例，但它们大多来自于早期的、不太友好的 webpack 版本 jquery-ui。任何建议都将不胜感激。我怀疑有比我上面尝试的更好的方法吗？

- ajthinking

Answer 1

在官方jquery-ui页面上，解释了如何使用npm，并链接到一个提供最小工作示例的github存储库，展示如何使用webpack设置jquery-ui。 我让它正常工作的方法（稍微调整了存储库的说明）如下：

1. 安装 file-loader 模块 (npm i -S file-loader)

2. 添加以下规则：

   {
       test: /\.(jpg|png)$/,
       loader: 'file-loader'
   },
   

基本上，我处理我的CSS、SCSS和jQuery UI所需的样式表的方式是（webpack.config.js）：

module: {
    rules: [
    {
        test: /\.s*css$/,
        use: [
            "style-loader", // creates style nodes from JS strings
            "css-loader", // translates CSS into CommonJS
            "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
    },
    {
        test: /\.(jpg|png)$/,
        loader: 'file-loader'
    },
    ]
},

在我的应用程序的js文件中：

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");
require("jquery-ui/ui/widgets/selectmenu");
require("jquery-ui/ui/widgets/slider");
require('jquery-ui/themes/base/all.css');

- jharme