[webpack] “코드 생성기가 [100KB]를 초과하여 [일부 파일]의 스타일을 최적화하지 않았다”는 것은 무엇을 의미합니까?

아래 세 가지 옵션 중 하나가 메시지를 제거합니다 (그러나 다른 이유로 그리고 다른 부작용으로 가정합니다).

1. node_modules디렉토리를 제외 하거나 include앱이있는 디렉토리를 명시 적으로 제외 합니다 (100KB를 초과하는 파일은 포함하지 않을 수 있음)
2. 설정된 바벨 옵션 compact 에 true( “자동”이외의 실제로 값)
3. 바벨 옵션 compact을 설정 false하십시오 (위 참조)

위 목록의 # 1은 node_modules디렉토리 를 제외 하거나 앱이있는 디렉토리를 명시 적으로 포함하여 달성 할 수 있습니다.

예 webpack.config.js:

let path = require('path');
....
module: {
     loaders: [
          ...
          loader: 'babel',
          exclude: path.resolve(__dirname, 'node_modules/')

… include: path.resolve(__dirname, 'app/')또는를 다시 사용하여 webpack.config.js.

위 목록의 # 2와 # 3 은이 답변에서 제안한 방법으로 또는 .babelrc파일 을 편집하여 (내 선호도) 달성 할 수 있습니다 . 예 :

$ cat .babelrc
{
    "presets": ["es2015", "react"],
    "compact" : true
}

다음 설정으로 테스트했습니다.

$ npm ls --depth 0 | grep babel
├── babel-core@6.7.4
├── babel-loader@6.2.4
├── babel-preset-es2015@6.6.0
├── babel-preset-react@6.5.0

답변

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}

{
    "env": {
      "development" : {
        "compact": false
      }
    }
}

<script type="text/babel" src="/js/bundle.js"></script>

<script src="/js/bundle.js"></script>

{
     test: /\.(js)$/,
     loader: 'babel-loader',
     options: {
          presets: ['es2015'],    // or whatever
          plugins: [require('babel-plugin-transform-class-properties')], // or whatever
          compact: true    // or false during development
     }
},