Talk about loaders in WebPack, and then use Babel-Loader to downconvert es6 syntax in your project. Git repository: webpack-demo

1. What is loaders?

  • Webpack enables use of Loaders to preprocess files.
  • In simple terms, it’s something that helps us process files, such as a JS file, and when we see this js file when webpack is packed, it will go through the definition of what we’re going to say nextbabel-loaderTo convert it, and then spit out a pure ES5 syntax JS file, probably played such a role.
  • So, there’s a lot ofloaderFor processing picturesfile-loader, used to process CSS filesstyle-loader.file-loaderYou can handle Excel files and so on.

2. Install Babel

  • Following on from the previous chapter, copy a chapter2 file and rename it tochapter3Go to the directory and start installing Babel. In fact, you can follow itBabel’s official websiteFollow its installation tutorial (use webPack), I’m just retelling the process.
$ cd chapter3
$ npm install babel-loader @babel/core @babel/preset-env --save-dev
Copy the code
  • So that ourpackage.jsonAdd the dependency in, and we have a successful installation.
{..."devDependencies": {+"@babel/core": "^ 7.8.4",
+   "@babel/preset-env": "^ 7.8.4",
+   "babel-loader": "^ 8.0.6"."webpack": "^ 4.41.5"."webpack-cli": "^ 3.3.10"}... }Copy the code

3. Use Babel for packaging

  • Ok, and then go to ourswebpack.config.jsIn the file, what we’re going to do isbabel-loaderAdd to the loaders list of module.
  • Don’t ask why, this is how WebPack is defined, this is how it uses the Loader format. If you don’t believe it, you can go to the official website to see how it uses loader.
.// Use the list of loaders
  module: {
    // Define rules
    rules: [
      {
        // This is a re, all files ending in js should be sent to me here!!
        test: /\.js$/.// Except node_modules
        exclude: /(node_modules|bower_components)/.// To use babel-loader, options are some of its configuration items
        use: {
          loader: "babel-loader".// "@babel/preset-env" is a plugin that Babel provides for its own use
          options: {
            presets: ["@babel/preset-env"]}}}]}...Copy the code
  • The configuration file is written, and then we can start packing with the command:
$ npm run build
Copy the code
  • Compare the packaged and manufactured versions of chapter2 beforedist/main.jsFile, we can actually see es6 syntax converted to ES5 syntax in the contents of each module.
No Babel packaging After packaging with Babel

4, Babel – polyfill

  • Here you think it is over, want to comfortable use of convenient and fast ES6 grammar where is so simple things oh! Babel-loader can convert all es6 syntaxes to ES5, but it can’t handle promise and array. from syntaxes, so Babel provides a babel-polyfill package.

  • Babel-polyfill simply complements Babel’s conversion capabilities and provides a shim for the current environment. Ok, so how to use babel-Polyfill?

  • It’s on the Babel website, so I’m going to go through it. First NPM installs this package, go –save.

$ npm install --save @babel/polyfill
Copy the code
  • The first way you can do this is at the beginning of the required JS fileimport "@babel/polyfill"Import this file. The second way, which is the way we’re going to use it in this project, is to add auseBuiltIns: "usage"Can.
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env", + {// add babel-polyfill + useBuiltIns:"usage"+}]]}}}]}};Copy the code
  • Then enternpm run buildPack it up and you’re done.Polyfill is used in webpackThere are several ways to do it, and you can go to the official website.

5. Core-js

  • Once you have successfully completed the configuration steps above and the Babel is packaged and displayed in the browser, we have configured Babel to meet most of your development needs, but we should encounter a few problems when packaging.

  • The first is that every time we package, even though the package is successful, we will see a warning.

  • After Babel 7.4.0, the @babel/polyfill package will be removed. We were told to use core-js instead of @babel/polyfill.

  • So we need to change something. Remove @babel/polyfill from package.json (I didn’t remove it in the repository code for demonstration purposes) and install the core-js package.

$ npm install core-js@3 --save
Copy the code
."dependencies": {-"@babel/polyfill": "^ 7.8.3"
+   "core-js": "^ 3.6.4 radar echoes captured." "}...Copy the code
  • referenceThe documentA change onwebpack.config.jsConfiguration file, this is very simple, just add a line of code.
module.exports = {
  // ...
  module: {
    rules: [{test: /\.js$/.exclude: /(node_modules|bower_components)/.use: {
          loader: "babel-loader".options: {
            presets: [["@babel/preset-env",
               {
                  / / add the Babel - polyfill
                  useBuiltIns: "usage",
+                 corejs: { version: 3.proposals: true}}]]}}}]}};Copy the code

4, summary

  • We’ve seen that in this chapterwebpacktheloadersAnd then I tried it out with Babel, and at this point you should know what WebPack is,loaderI’ve got some idea what it is.
  • In a word, to put it in a better conceptFu canWith thatloaderTo deal with all kinds of documents,webpackBecome strong, inwebpackThe corresponding is defined inloaderIn the future, we can makewebpackRecognize them and deal with them.
  • babelIt is not recommended that we continue to use it@babel/polyfillthisgasketIs recommended to install directlycore-jsThe package.
  • loadersThat’s not all. I’m going to talk a little bit about what we do with image resources.
  • Reference links:
    • Babel’s official website
    • Webpack website