webpack 的几个重要概念

2

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'
  }
};

这里指定了两个入口,这里的 appvendors 作为入口的名字,在配置 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 definerequire

  • css/scss/less 中的 @import

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...