웹팩 모더 나이저 default.a.prefixed는 웹팩에 모더 나이저를 사용하는 기존 코드를 다음과 같이 내가 노력하고 함수

되지 않습니다 :웹팩 모더 나이저 default.a.prefixed는 웹팩에 모더 나이저를 사용하는 기존 코드를 다음과 같이 내가 노력하고 함수

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"));

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

js/main.js

import Modernizr from 'modernizr'; 

... 

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

config/.modernizrrc

이 그러나 나에게 브라우저에서 런타임 오류를주고있다 (더 NPM 실행 빌드 또는 웹팩 오류가 있습니다) :

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 {} 
__proto__: 
    on:ƒ (n,e) 
    _config: 
     classPrefix:"" 
     enableClasses:true 
     enableJSClass:true 
     usePrefixes:true 
     __proto__:Object 
_q:[] 
_version:"3.5.0" 
__proto__:Object

나는 아주 새로운 오전 확신 내가 잘못 여기서 뭐하는 거지하지 무엇을 :

는 또한 Modernizr 오브젝트가 prefixed 기능 (console.log)가없는 것을 알 수있다.

도움이 매우 감사합니다.

출처

2017-10-12 alienfromouterspace

다음은 문제를 해결 한 것 같다 :

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 (.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을 자동 삽입 할 수 없습니다. 시행 된 modernizr-bundle.js은 index.html이고 아직

출처

2017-10-13 14:31:57 alienfromouterspace

웹팩 모더 나이저 default.a.prefixed는 웹팩에 모더 나이저를 사용하는 기존 코드를 다음과 같이 내가 노력하고 함수

답변

관련 문제