title: Webpack 4 + Babel 7.4.0 + Babel Polyfill
body: <p>I am trying to improve the support for my application which is written in ES6 via <code>@babel/polyfill</code> and the <code>browserslist</code> support. I've followed all the instructions over on <a href="https://babeljs.io/docs/en/babel-polyfill" rel="nofollow noreferrer">https://babeljs.io/docs/en/babel-polyfill</a> but I think I am missing something.</p>
  
  <p>My <code>browserslist</code> support is defined via my package.json. I am validating whether the install has worked by checking for <code>Array.from</code> (which is used throughout the code) polyfill.</p>
  
  <p>Any ideas why I can't see the polyfills in the compiled code? I use to declare the polyfill in the entrypoint, but the babel docs now says this isn't needed.</p>
  
  <blockquote>
    <p>If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed.</p>
  </blockquote>
  
  <pre><code> ...
    "browserslist": [
      "last 2 version",
      "&gt; 1%",
      "IE 10"
    ],
    "devDependencies": {
      "@babel/core": "^7.4.0",
      "@babel/plugin-syntax-dynamic-import": "^7.0.0",
      "@babel/preset-env": "^7.4.2",
      "babel-core": "^6.26.3",
      "babel-loader": "^8.0.0-beta.4",
      "babel-preset-env": "^1.7.0",
      "chromedriver": "^2.41.0",
      "clean-webpack-plugin": "^0.1.19",
      "copy-webpack-plugin": "^4.6.0",
      "css-loader": "^1.0.0",
      "cssnano": "^4.1.4",
      "env2": "^2.2.2",
      "file-loader": "^1.1.11",
      "html-critical-webpack-plugin": "^2.1.0",
      "html-webpack-plugin": "^3.2.0",
      "lunr": "^2.3.5",
      "mini-css-extract-plugin": "^0.4.1",
      "nightwatch": "^0.9.21",
      "node": "^7.10.1",
      "node-sass": "^4.11.0",
      "optimize-css-assets-webpack-plugin": "^5.0.1",
      "replace-in-file-webpack-plugin": "^1.0.6",
      "sass-loader": "^7.0.3",
      "selenium-server": "^3.14.0",
      "selenium-standalone": "^6.15.6",
      "style-loader": "^0.21.0",
      "webpack": "^4.17.2",
      "webpack-cli": "^3.1.0",
      "webpack-dev-server": "^3.2.1",
      "webpack-merge": "^4.1.3"
    },
    "dependencies": {
      "@babel/polyfill": "^7.4.0",
      "bootstrap": "^4.1.3",
      "handlebars": "^4.1.0",
    }
  </code></pre>
  
  <p>My <code>.babelrc</code> file looks like the following:</p>
  
  <pre><code>{
      "presets": [
          [
              "@babel/preset-env", {
                  "useBuiltIns": "usage"
              }
          ]
      ],
      "plugins": ["@babel/plugin-syntax-dynamic-import"],
  }
  </code></pre>
  
  <p>My webpack file looks like this:</p>
  
  <pre><code>{
      test: /\.js$/,  
      use: {
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-env']
          }
      }
  }]
  </code></pre>