のWebPACK modernizr default.a.prefixedはWebPACKのにModernizrを使用する既存のコードを次のように私がしようとしている機能

ではありません。のWebPACK modernizr default.a.prefixedは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と私はここで間違ってやっている何をかなり確実ではないです。

ご協力いただきまして誠にありがとうございます。

出典

2017-10-12 alienfromouterspace

次のように問題を修正しているようだ：

{ 
"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'); 
    ... 
}());

package.json

config/modernizr.config （.modernizrrcから改称）の.js

{ 
    "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]作品を動作しません。しかし
はgを自動注入できませんでしたenerated modernizr-bundle.jsにindex.htmlまだ

出典

2017-10-13 14:31:57 alienfromouterspace

のWebPACK modernizr default.a.prefixedはWebPACKのにModernizrを使用する既存のコードを次のように私がしようとしている機能

答えて

関連する問題