webpack 的几个重要概念

webpack 的几个重要概念

理解了这几个 webpack 的几个重要概念，将有助于更快地掌握 webpack 的使用。

1. entry

webpack 构建了你整个项目的依赖树，entry 用来指定打包的起始节点，webpack 会从这个节点出发将所有依赖的模块打包进来。可以指定一个或多个 entry，具体配置方法如下：

配置 entry

单一入口

const config = {
  entry: './entry/file.js'
};

entry 为一个字符串，指定了单一的入口。

多入口

如果需要指定多个入口，可以按下面这样配置：

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

这里指定了两个入口，这里的 app 和 vendors 作为入口的名字，在配置 output 的时候可以用到。

案例

将框架代码和业务代码分开打包

const config = {
  entry: {
    app: './src/app.js',
    vendors: './lib/vendors.js'
  }
};

假设 app 中引用了 vendors，这个时候打包后，app 中依旧包含了 vendors 中的代码，为此，需要使用 CommonsChunkPlugin 这个插件。来去除掉 app 中存在于 vendors 中的代码。使用了这个插件之后，会得到一个 commom 模块，vendors 模块中只有一句话，就是引用这个 common 模块。这种情况，可以配置 CommonsChunkPlugin 插件，让它得到的 common 模块的命名和 vendors 一样，这样就把 vendors 覆盖了。

多页应用

假如有 3 个页面，他们都应用了其中一个库，由于是单页应用，每次跳转都会刷新页面，重新加载脚本，因此可以将三个页面公用的类库打包为单个文件，这样其他页面可以利用前一个页面缓存下来的类库。同样的这个时候，也需要使用到 CommonsChunkPlugin 这个插件。

2. output

将所有的模块和资源打包完成后，总需要一个地方来放置它，output 就是做这个事情的，它指定了打包后的文件放置的位置，以及命名等信息。

可以简单地配置输出文件的路径：

const config = {
  output: 'bundle.js'
};

当通常都需要更多的配置，output 提供了很多可选的配置，其中涉及到文件命名，source map，jsonp，以及打包为 library 等诸多选项，可以在 这里 看来 output 各项配置的含义。

3. loader

webpack 将所有的资源（css, js, image 等）都看做模块，但是 webpack 能处理的只是 JavaScript，因此，需要存在一个能将其他资源转换为模块，让 webpack 能将其加入依赖树中的东西，它就是 loader。在 webpack 的配置文件中，配置一个 loader 的代码如下（这里使用了 2.0 版本的 webpack 的配置方式）：

rules: [
    {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
    }
]

test 说明了当前 loader 能处理那些类型的文件，use 则指定了 loader 的类型。

4. plugins

loader 只能针对某种特定类型的文件进行处理，而 plugin 的功能则更为强大。在 plugin 中能够介入到整个 webpack 编译的生命周期。配置 plugin 的方式如下：

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
]

webpack 自身已经提供了一些很有用的 plugin。

5. module

webpack 将一切资源看做是一个个模块，然后将其加入依赖树中。那么那些东西会被当做模块呢？如下：

• ES2015 import

• commonjs require()

• AMD define 与 require

• css/scss/less 中的 @import

• 存在于样式表中的 url() 或 html 中的 <img src=...> 的图片