webpack modernizr default.a.prefixed 不是函数

Question

我正在尝试如下对使用 Modernizr 的现有代码进行 webpack：

package.json

{
    "devDependencies": {
        ...
        "modernizr": "^3.5.0",
        "modernizr-loader": "^1.0.1",
        "webpack": "^3.6.0"
      }
    ...
}

webpack.config.js

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, '..', 'public'),
        filename: 'bundle.min-[hash:6].js'
    },
    module: {
        rules: [{ test: /\.modernizrrc.js$/, use: ['modernizr-loader'] },
                { test: /\.modernizrrc(\.json)?$/,
                  use: ['modernizr-loader', 'json-loader'] },
                {test: /\.(png|jpe?g|gif|svg|ico|mp3|ogg|mp4|webm)$/,
                 loader: 'file-loader',
                 options: {name: 'media/[name].[ext]'}},
                { test: /\.css$/, loader: 'style-loader!css-loader' },
                { test: /\.html$/, loader: 'html-loader',
                  options: {minimize: true, attrs: 'img:src link:href source:src'} }
        ]
    },

    resolve: {
      alias: {
        modernizr$: path.resolve(__dirname, "./config/.modernizrrc")
      }
    }
};

index.js

...
document.write(require("./js/main.js"));

js/main.js

import Modernizr from 'modernizr';

...

$(function () {
    ...
    var transform = Modernizr.prefixed('transform');
    ...
}());

config/.modernizrrc

{
  "minify": true,
  "options": [
    "setClasses"
  ],
  "feature-detects": []
}

然而，这在浏览器中给我一个运行时间错误（没有 npm 运行构建或 webpack 错误）：

Uncaught TypeError:     main.js:355
__WEBPACK_IMPORTED_MODULE_1_modernizr___default.a.prefixed is not a function
    at main.js:355
    at Object.<anonymous> (main.js:373)
    at Object.<anonymous> (bundle.min-cfe9d2.js?cfe9d2040bf0ebd00205:20867)
    at __webpack_require__ (bootstrap cfe9d2040bf0ebd00205:19)
    at Object.<anonymous> (index.js:6)
    at __webpack_require__ (bootstrap cfe9d2040bf0ebd00205:19)
    at Object.<anonymous> (jquery.js:10253)
    at __webpack_require__ (bootstrap cfe9d2040bf0ebd00205:19)
    at module.exports.ctor.super_ (bootstrap cfe9d2040bf0ebd00205:62)
    at bootstrap cfe9d2040bf0ebd00205:62

我是按照一些 Webpack 教程和 Modernizr 示例代码走到这一步的。如果在 webpack 中我直接包含来自 index.html.

的 Modernizr，则此代码有效

我还可以看到 Modernizr 对象没有 prefixed 函数 (console.log):

Modernizr {}
__proto__:
    on:ƒ (n,e)
    _config:
        classPrefix:""
        enableClasses:true
        enableJSClass:true
        usePrefixes:true
        __proto__:Object
_q:[]
_version:"3.5.0"
__proto__:Object

我是 webpack + Modernizer 的新手，不太确定我做错了什么。

非常感谢任何帮助。

Answer 1

以下似乎解决了问题：

package.json

{
"devDependencies": {
    ...
    "modernizr": "^3.5.0",
    "modernizr-webpack-plugin": "^1.0.6",
    "webpack": "^3.6.0"
  }
...
}

webpack.config.js

ModernizrWebpackPlugin = require('modernizr-webpack-plugin'),
ModernizrConfig = require('./config/modernizr.config.js'),

module.exports = {
...
module: {
    rules: [{test: /\.(png|jpe?g|gif|svg|ico|mp3|ogg|mp4|webm)$/,
             loader: 'file-loader',
             options: {name: 'media/[name].[ext]'}},
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.html$/, loader: 'html-loader',
              options: {minimize: true, attrs: 'img:src link:href source:src'} }
    ]
},
plugins: [
    ...
    new HtmlWebpackPlugin({
        hash: true, template: './index.html'}),
    new ModernizrWebpackPlugin(ModernizrConfig)
]
};

js/main.js

<strike>`import Modernizr from 'modernizr';`</strike>
...
$(function () {
    ...
    var transform = Modernizr.prefixed('transform');
    ...
}());

config/modernizr.config.js（从 .modernizrrc 重命名）

{
    "minify": true,
    "options": [..., "prefixed", ....],
    "feature-detects": [...]
}

index.html

...
<body>
    ...
    <script type="text/javascript" src="modernizr-bundle.js"></script>
</body>
</html>

备注：

[hash:6] 在 modernizr-webpack-plugin 的配置中不起作用 filename属性，[hash] 有效，但
还无法将生成的 modernizr-bundle.js 自动注入到 index.html 中

webpack modernizr default.a.prefixed 不是函数

webpack modernizr default.a.prefixed is not a function

javascript

modernizr

webpack