Webpack 代码分离

? 提示：

版本问题

本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改变。所以，如果你的项目中已使用了 webpack 1.x ，本教程的示例将不适用，请慎重。

如果铁了心要升级 webpack ，请参考

阅读建议

阅读本文前，建议先阅读。

代码分离是 webpack 中最引人注目的特性之一。

你可以把你的代码分离到不同的 bundle 中，然后你就可以去按需加载这些文件。

总的来说， webpack 分离可以分为两类：

资源分离

代码分离

资源分离(Resource Splitting)

对第三方库(vendor) 和 CSS 进行代码分离，这些方式有助于实现缓存和并行加载。

分离 CSS(CSS Splitting)

你可能也想将你的样式代码分离到单独的 bundle 中，以此使其独立于应用程序逻辑。这加强了样式的可缓存性，并且使得浏览器能够并行加载应用程序代码中的样式文件，避免 FOUC 问题 ()。

安装如下

$ npm install --save-dev extract-text-webpack-plugin

webpack.config.js 中需要按下面进行配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {  // 关于模块配置  module: {    // 模块规则（配置 loader、解析器等选项）    rules: [      {        // css 加载        test: /\.css$/,        use: ExtractTextPlugin.extract({          use: "css-loader"        })      }    ]  },  // 附加插件列表  plugins: [    // 将样式文件独立打包    new ExtractTextPlugin("styles.css")  ]};

? 示例DEMO09： ( / )

分离第三方库(Vendor Code Splitting)

一个典型的应用程序，由于框架/功能性需求，会依赖于许多第三方库的代码。不同于应用程序代码，这些第三方库代码不会频繁修改。

如果我们将这些库(library)中的代码，保留在与应用程序代码相独立的 bundle 中，我们就可以利用浏览器缓存机制，把这些文件长时间地缓存在用户机器上。

为了完成这个目标，不管应用程序代码如何变化，vendor 文件名中的 hash 部分必须保持不变。学习如何使用 CommonsChunkPlugin 代码。

webpack.config.js

const webpack = require('webpack');module.exports = {  // 这里应用程序开始执行  // webpack 开始打包  // 本例中 entry 为多入口  entry: {    main: "./app/index",    vendor: "react"  },    // webpack 如何输出结果的相关选项  output: {    // 所有输出文件的目标路径    // 必须是绝对路径（使用 Node.js 的 path 模块）    path: path.resolve(__dirname, "dist"),    // 「入口分块(entry chunk)」的文件名模板（出口分块？）    // filename: "bundle.min.js",    // filename: "[name].js", // 用于多个入口点(entry point)（出口点？）    // filename: "[chunkhash].js", // 用于长效缓存    filename: "[name].[chunkhash:8].js", // 用于长效缓存  },  // 附加插件列表  plugins: [    new webpack.optimize.CommonsChunkPlugin({      name: "vendor" // 指定公共 bundle 的名字。    })  ]};

在上面的配置中，

在 entry 属性中，将 react 指定为一个独立的入口 vendor；

然后，在 output 属性中，将 filename 指定为 [name].[chunkhash:8].js，这表示输出文件的文件名样式。

最后在 plugins 列表中引入 CommonsChunkPlugin 插件，用来指定 bundle 。

执行 webpack 命令后，webpack 会生成 2 个 bundle 文件，形式如：

main.bef8f974.jsvendor.2f1bd4c8.js

? 示例DEMO10： ( / )

代码按需分离(On Demand Code Splitting)

虽然前面几类资源分离，需要用户预先在配置中指定分离模块，但也可以在应用程序代码中创建动态分离模块。

这可以用于更细粒度的代码块，例如，根据我们的应用程序路由，或根据用户行为预测。这可以使用户按照实际需要加载非必要资源。

前一节，我们了解了 webpack 可以将资源拆分为bundle。接下来，我们要学习如何异步加载。例如，这允许首先提供最低限度的引导 bundle，并在稍后再异步地加载其他功能。

webpack 支持两种相似的技术实现此目的：使用 import() (推荐，ECMAScript 提案) 和 require.ensure() (遗留，webpack 特定)。本文只介绍官方推荐的 import() 方式。

定义了 import() 作为一种在运行时(runtime)动态载入 ES2015 模块的方法。

webpack 把 import() 作为一个分离点(split-point)，并把引入的模块作为一个单独的 chunk。 import() 将模块名字作为参数并返回一个 Promoise 对象，即 import(name) -> Promise

配合 Babel 使用

如果你想要在中使用 import，但是由于 import() 还是属于 Stage 3 的特性，所以你需要安装/添加插件来避免 parser 报错。在草案正式成为规范后，就不再需要这个插件了。

例：

我们来定义一个 Clock 组件，动态引入 moment 库。

首先，安装 moment 库。

$ npm install --save-dev moment

JavaScript 代码：

class Clock extends React.Component {  constructor(props) {    super(props);    this.state = { date: new Date().toLocaleDateString() };    this.click = this.click.bind(this);  }  click() {    // 动态引入import()    import('moment')      .then(moment => moment().format("MMMM Do YYYY, h:mm:ss a"))      .then(str => this.setState({date:str}))      .catch(err => console.log("Failed to load moment", err));  }  render() {    return (      
             
      It is {this.state.date}.
        
      Click here to changing the time.
      
     
    );  }}

webpack.config.js

// 关于模块配置module: {  // 模块规则（配置 loader、解析器等选项）  rules: [    {      // 语义解释器，将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法      test: /\.jsx?$/,      include: path.resolve(__dirname, "app"),      // 应该应用的 loader，它相对上下文解析      // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的      // 查看 webpack 1 升级指南。      loader: "babel-loader",      // loader 的可选项      options: {        presets: ["es2015", "react"],        plugins: ['syntax-dynamic-import']      },    },  ]},