從零開始的webpack生活-0x012：TranspilingLoader裝載腳本

0x001 概述

上一章講的是樣式裝載相關的loader，這一章見得是腳本加載相關的loader

0x002 環境配置

$ mkdir 0x012-transliling-loader
$ cd 0x012-transliling-loader
$ npm init -y
$ npm install --save-dev webpack
$ touch ./src/index.js
$ vim webpack.config.js

// ./webpack.config.js
const path = require('path');

module.exports = {
    entry : {
        'index': ['./src/index.js'],
    },
    output: {
        path    : path.join(__dirname, 'dist'),
        filename: '[name].bundle.js'
    }
;

0x003 栗子1-babel-laoder加載es6

1. 安裝依賴

   $ cnpm install --save-dev babel-loader babel-core babel-preset-env

2. 修改配置

   const path         = require('path');
   
   module.exports = {
       entry : {
           'index': ['./src/index.js'],
       },
       output: {
           path    : path.join(__dirname, 'dist'),
           filename: '[name].bundle.js'
       },
       module: {
           rules: [
               {
                   test   : /\.js$/,
                   exclude: /node_modules/,
                   use    : {
                       loader: "babel-loader"
                   }
               }
           ]
       }
   }
   ;

3. 添加babel配置文件

   $ vim ./.babelrc
   // ./.babelrc
   {
     "presets": ["es2015"]
   }

4. 使用es6編寫腳本

   $ vim ./src/index.js
   // ./src/index.js
   let sayHello = () => {
       console.log('hello webpack')
   }
   sayHello();

5. 打包並查看結果

   // ./dist/index.bundle.js
   /***/ }),
   /* 1 */
   /***/ (function(module, exports, __webpack_require__) {
   
   "use strict";
   
   
   var sayHello = function sayHello() {
       console.log('hello webpack');
   };
   sayHello();
   
   /***/ })
   /******/ ]);

   能夠看到，es6語法被自動轉化成了es5

6. 更多配置請查閱webpack關於babel-loader章節

0x004 栗子2-awesome-typescript-loader 加載typescript

1. 安裝依賴

   $ cnpm install --save-dev awesome-typescript-loader

2. 修改配置

   const path = require('path');
   
   module.exports = {
       entry  : {
           'index': ['./src/index.ts'],
       },
       output : {
           path    : path.join(__dirname, 'dist'),
           filename: '[name].bundle.js'
       },
       resolve: {
           extensions: ['.ts', '.tsx', '.js', '.jsx']
       },
       module : {
           rules: [
               {
                   test  : /\.tsx?$/,
                   loader: 'awesome-typescript-loader'
               }
           ]
       }
   }
   ;

3. 添加typescript的配置

   $ vim ./tsconfig.json
   // ./tsconfig.json
   {
     "compilerOptions": {
       "noImplicitAny": true,
       "removeComments": true
     },
     "awesomeTypescriptLoaderOptions": {
       /* ... */
     }
   }

4. 編寫index.ts

   class Greeter {
       greeting: string;
   
       constructor(message: string) {
           this.greeting = message;
       }
   
       greet() {
           return "Hello, " + this.greeting;
       }
   }
   
   let greeter = new Greeter("world");

5. 編譯並查看結果

   /* 1 */
   /***/ (function(module, exports) {
   
   var Greeter = (function () {
       function Greeter(message) {
           this.greeting = message;
       }
       Greeter.prototype.greet = function () {
           return "Hello, " + this.greeting;
       };
       return Greeter;
   }());
   var greeter = new Greeter("world");
   
   
   /***/ })
   /******/ ]);

   能夠看出，typescript被自動轉化成了js

6. 其餘更多配置，請查閱awesome-typescript-loader相關說明

0x005 資源

• 源代碼