从零开始的webpack生活-0x012：TranspilingLoader装载脚本

Tonny 发布于2019-08-21 17:32 / 3047人阅读

摘要：概述上一章讲的是样式装载相关的，这一章见得是脚本加载相关的环境配置栗子加载安装依赖修改配置添加配置文件使用编写脚本打包并查看结果可以看到，语法被自动转化成了更多配置请查阅关于章节栗子加载安装依赖

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

安装依赖

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

修改配置

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"
                }
            }
        ]
    }
}
;

添加babel配置文件

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

使用es6编写脚本

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

打包并查看结果

// ./dist/index.bundle.js
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


var sayHello = function sayHello() {
    console.log("hello webpack");
};
sayHello();

/***/ })
/******/ ]);

可以看到，es6语法被自动转化成了es5

更多配置请查阅webpack关于babel-loader章节

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

安装依赖

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

修改配置

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"
            }
        ]
    }
}
;

添加typescript的配置

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

编写index.ts

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

编译并查看结果

/* 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

其他更多配置，请查阅awesome-typescript-loader相关说明

0x005 资源

源代码

GPU云服务器云服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89644.html

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x011：StylingLoader装载样式

0x001 概述上一章讲的是装载模板，这一章讲的是装载样式 0x002 配置环境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x010：TemplatingLoader装载模板

摘要：概述上一章讲的时候关于文件相关的，这一章讲的是模板相关的。环境配置栗子加载安装依赖包编写并引入配置低于否则使用打包并查看结果可以看到，被打包成了字符串，并封装成模块导出。更多资源，请查阅的仓库和官网资源源代码 0x001 概述上一章讲的时候关于文件相关的loder，这一章讲的是模板相关的loder。 0x002 环境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x013：LintingLoader格式校验

摘要：概述上一章讲的是脚本装载相关的，这一章见得是脚本格式校验相关的环境配置使用校验格式这份配置是偷的安装依赖包修改配置文件添加配置文件编写测试代码张三打包输出张三 0x001 概述上一章讲的是脚本装载相关的loader，这一章见得是脚本格式校验相关的loader 0x002 环境配置 $ mkdir 0x013-linting-loader $ cd 0x013-linting-load...

ephererid 2019-08-21 17:32 评论0 收藏0
从零开始的webpack生活-0x009：FilesLoader装载文件

摘要：修改配置文件匹配的文件名，这里匹配后缀为的，只要了该文件名结尾的文件，都将使用这个来处理命中后使用的加载器查看结果，和之前一致，推荐使用配置文件形式，可以保持引入文件格式的一致性。有利于维护和美观更多配置，可以查阅关于部分。 0x001 概述上一章讲的是DLL加速编译，这一章开始讲loader相关的部分，但是关于plugin的部分善未完结，因为即将要讲的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 评论0 收藏0