Webpack 笔记二：[译]Webpack2的新特性

原文What's new in webpack 2。译文内容和原文内容可能有点出入，可能会带有我个人的思路，敬请原谅，版权由原文所有。

主要变化

ES6 模块

webpack 2 带来了ES6的原生支持。这意味着webpack现在可以使用 import和export可以转换成为CommonJS。

import { currentPage, readPage } from "./book";

currentPage === 0;
readPage();
currentPage === 1;

// book.js
export var currentPage = 0;

export function readPage() {
    currentPage++;
}

export default "This is a book";

ES6代码分割

ES6 Loader定义了System.import作为一个方法在运行时动态加载ES6模块。Webpack用分割点串联整个System.import并在一个单独的chunk中放入所要求的模块。

System.import获取模块名作为一个参数并返回一个Promise。

function onClick() {
    System.import("./module").then(module => {
        module.default;
    }).catch(err => {
        console.log("Chunk loading failed");
    });
}

好消息是加载快的失败错误已经被处理。

动态表达式

传了一个局部表达式给System.import，这处理德像是CommonJS的表达式（webpack创建了针对所有可能的文件一个context）。

System.import创建了一个独立的chunk给每一个可能的module。

function route(path, query) {
    return System.import("./routes/" + path + "/route")
        .then(route => new route.Route(query));
}
// 给每一个可能的路由创建一个独立的chunk

用AMD和CommonJS混合表达ES6

只要是AMD和CommonJS，你能混用这栅格模块类型（即使在相同的文件内）。Webpack用起来像是babel

// CommonJS 使用 ES6 模块
var book = require("./book");

book.currentPage;
book.readPage();
book.default === "This is a book";

// ES6 模块 使用 CommonJS
import fs from "fs"; // module.exports 映射到 default
import { readFileSync } from "fs"; // 命名的 exports 可以从返回对象中读取

typeof fs.readFileSync === "function";
typeof readFileSync === "function";

babel 和 webpack

es2015的bebel默认转换ES6模块到CommonJS。如果用webpack处理ES6模块，你要用es2015-webpack替换。

ES6 特别优化

ES6静态本质允许新的优化。例子中很多情况可能检测到exports被用到和那些没被用到。

在这种情况下，webpack会判断export是否被使用，省略掉那些暴露给其他模块的export。最小化将会标记那些没有使用的声明都給忽略掉，大大减少空间。

下面情况可能被检测到：

• named import
• default import
• reexport

下面情况是不可能被检测到：

• import * as ...直接被使用
• CommonJS or AMD 使用在ES6模块中
• System.import

ES6 export拆分

将能跟踪到的export使用，webpack就会拆分export的名字变成单独字符。

配置

以前的情况，环境变量经常写在配置文件中用于控制不同的环境。Webpack2有种新的方法，传选项值进入配置文件。

配置文件导出一个方法去配置，这个方法被CLI所调用，这个值将用--env传入到配置方法中。

你也可以传一个字符串 (--env dev => "dev")或者是一个复杂的选项对象 (--env.minimize --env.server localhost
=> {minimize: true, server: "localhost"})。我推荐传一个对象，因为看上去更有延展性，取决于你自己。

例子

// webpack.config.babel.js
exports default function(options) {
    return {
        // ...
        devtool: options.dev ? "cheap-module-eval-source-map" : "hidden-source-map"
    };
}

分解选项

在resolver中有个主要的重构(webpack/enhanced-resolve)。这意味着分解选项改变了。简化和改变只是为了让它更容易配置正确。

新的options:

{
    modules: [path.resolve(__dirname, "app"), "node_modules"]
    // (was split into `root`, `modulesDirectories` and `fallback` in the old options)
    // In which folders the resolver look for modules
    // relative paths are looked up in every parent folder (like node_modules)
    // absolute paths are looked up directly
    // the order is respected

    descriptionFiles: ["package.json", "bower.json"],
    // These JSON files are read in directories

    mainFields: ["main", "browser"],
    // These fields in the description files are looked up when trying to resolve the package directory

    mainFiles: ["index"]
    // These files are tried when trying to resolve a directory

    aliasFields: ["browser"],
    // These fields in the description files offer aliasing in this package
    // The content of these fields is an object where requests to a key are mapped to the corresponding value

    extensions: [".js", ".json"],
    // These extensions are tried when resolving a file

    enforceExtension: false,
    // If false it will also try to use no extension from above

    moduleExtensions: ["-loader"],
    // These extensions are tried when resolving a module

    enforceModuleExtension: false,
    // If false it's also try to use no module extension from above

    alias: {
        jquery: path.resolve(__dirname, "vendor/jquery-2.0.0.js")
    }
    // These aliasing is used when trying to resolve a module
}

最新变化修改

Promise补充

Chunk的加载依赖于Promise。这意味着你需要一个Promise去补充旧浏览器。

ES6本身就包含promises，所以我也不想在每个bundle中补充Promise。所以取决于应用开发者怎么去提供promises。

Can I use Promises?

其他补充

你需要一个Object.defineProperty补充ES6模块，或者如果用其他方式使用module对象而并非module.exports, module.id, module.loaded或者module.hot。

针对ES6模块你需要Function.prototype.bind填充。

你需要Object.keys填充require.context().keys()。

Loaders配置文件

配置文件中的loaders配对的是resourcePath而不是resource。这意味着query中将不在包含配对信息。

这曾经是个问题，如bootstrap应为它的字体将test配置复杂化。图片从/\.svg$/转变成为/\.svg($|\?)/。现在你可以用简单的方法。

配置文件中的loader决定对应的配置文件（或在配置文件中需要表明的context选项）。这需要修复这问题通过在当前包外面的npm link模块。

另一个变化是允许以下的语法去配置loaders：

loaders: [
    {
        test: /\.css$/,
        loaders: [
            "style-loader",
            { loader: "css-loader", query: { modules: true } },
            {
                loader: "sass-loader",
                query: {
                    includePaths: [
                        path.resolve(__dirname, "some-folder")
                    ]
                }
            }
        ]
    }
]

Loader 选项和最小化

UglifyJsPlugin 将不再支持最小化。debug选项被移除。Loaders不能从webpack配置文件中读它们的选项。作为替代，你需要在LoaderOptionsPlugin提供选项。

new webpack.LoaderOptionsPlugin({
    test: /\.css$/, // optionally pass test, include and exclude, default affects all loaders
    minimize: true,
    debug: false,
    options: {
        // pass stuff to the loader
    }
})

将它们分开的原因在于，我不想允许在配置文件中的任意键都能设置其可用。

插件

许多插件可以提取选项取代多参数。这样可以更方便扩展。因为旧参数出错的形式已经过去。

HMR交流

在webpack1中，更新的信号用Web Messaging API (postMessage)进行通信。webpack2用标准的事件分发器去传递事件。这意味着WebSocket必须是单行表示。

webpack-dev-server也是默认当行表示。

这需要允许用webpack-dev-server去在WebWorkers更新代码。

触发顺序

这个Occurrence order插件不在需要，Occurrence order默认被打开。

代码分割

require.ensure和AMD的require是异步的，即使chunk已经被加载了。

如有错漏，请指点出来。

转载，请表明出处。总目录前端经验收集器