Question

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

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的insteda直接包含来自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不是一个函数

1 个答案: