webpack入门

日期:2017年3月16日      标签:构建, webpack

webpack作用

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

* 输入 - webpack - 输出 *

webpack使用

简单的webpack打包配置:

var webpack = require('webpack')  
module.exports = {  
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: 'index.html'})
  ]
}

entry: 文件图表入口的配置项,可以是一个数组;
output: 输出配置,告诉webpack如何处理归拢在一起的代码
loaders:告诉webpack该如何分类处理输入的文件
Plugins: 由于 loader 仅在每个文件的基础上执行转换,如果要对文件进行全局的转换,可以使用Plugins配置

entry配置

如果有多个入口文件,可以配置成Object、数组、字符串;

entry: {  
  app: './src/app.js',
  vendors: './src/vendors.js'
}

更多信息

output配置

output需要设置为一个object,至少需要指定名称(filename)和路径(path)两个值。
其他的参数有: chunkFilename:非入口的 chunk(non-entry chunk) 的文件名,路径相对于 output.path 目录。
crossOriginLoading: 此选项启用跨域加载(cross-origin loading) chunk。
devtoolLineToLine:所有/指定模块启用行到行映射(line-to-line mapped)模式。
sourceMapFilename:JavaScript 文件的 SourceMap 的文件名。它们在 output.path 目录中。
其他.. 更多参数

loaders配置

loader 是对应用程序中资源文件进行转换。它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件。

简单配置

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
}

test:匹配需要处理的文件
loader: 需要使用的loader名称
include:匹配需要处理的文件
exclude:过滤不需要处理的文件

Loader 特性

  • loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader,返回 webpack 所预期的 JavaScript。
  • loader 可以是同步或异步函数。
  • loader 运行在 Node.js 中,并且能够执行任何可能的操作。
  • loader 接收查询参数。用于 loader 间传递配置。
  • 插件(plugin)可以为 loader 带来更多特性。
  • loader 能够产生额外的任意文件。

常用的loader

  • babel-loader ES6转换为ES5
  • css-loader css打包
  • json-loader
  • less-loader
  • style-loader 通过注入<style>标签将CSS添加到DOM中
  • url-loader
    url加载器的功能类似file加载器,但是在文件大小低于指定的限制时(单位 bytes)可以返回一个 Data Url。

Plugins配置

插件是 wepback 的支柱功能。在你使用 webpack 配置时,webpack 自身也构建于同样的插件系统上!插件目的在于解决 loader 无法实现的其他事。

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

使用

由于 plugin 可以携带参数/选项,你必须在 wepback 配置中,向 plugins 属性传入 new 实例。

常用的plugins

如果遇到不认识的plugins可以到github上搜索

1.BannerPlugin

作用:为每个编译之后的文件头部添加信息

new webpack.BannerPlugin('This file is created by yuyouwen')  

2.CommonsChunkPlugin

作用:提取公共代码

new webpack.optimize.CommonsChunkPlugin({  
  name: 'vendor',
  minChunks: function (module, count) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

new webpack.optimize.CommonsChunkPlugin({  
  name: 'manifest',
  chunks: ['vendor']
})

参数: * name 公共代码块的名称 * filename 公共文件的名称 * minChunks 这个函数会被 CommonsChunkPlugin 插件回调,并将module 和 count 参数传入 * chunks 指定需要提取的代码块名称,如果不指定,所有的入口代码都会被选择

3.DefinePlugin

允许你创建一个在编译时可以配置的全局常量。

4.UglifyJsPlugin

这个插件使用 UglifyJS 去压缩你的JavaScript代码

5.ExtractTextPlugin

将css代码抽离到单独的文件

6.optimize-css-assets-webpack-plugin

压缩css代码

7.HtmlWebpackPlugin

简化HTML文件的创建

new HtmlWebpackPlugin({  
  filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
})

配置

  • filename 创建的文件名称(包含路径)
  • template 创建文件的模板
  • inject 插入到body后面
  • minify 压缩html
  • 插入到模板中资源的顺序

8.copy-webpack-plugin

拷贝静态文件到指定目录

配置:

  • from 拷贝的源目录
  • to 目标目录
  • ignore 需要忽略的文件

9.compression-webpack-plugin

压缩插件,通过压缩算法压缩文件

配置:

  • asset 压缩之后的文件
  • algorithm 压缩算法
  • test 需要处理的文件
  • threshold 只有大小找过这个阈值才会处理,单位是bytes
  • minRatio 只有超过这个压缩比例才会压缩

resolve配置

这些选项能设置模块如何被解析。

resolve: {  
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': './',
    }
}

常用的配置项

  • alias 别名,简化import或者require的引入模块路径;配置后,比如原本是require('moment/min/moment-with-locales.min.js') 可以简写为require('moment')
  • extensions 对模块后缀名的简写,配置后,原本是require('./components/app.vue') 可以简写为require('./components/app')。

参考文档

webpack文档

(正文完)



© 喻小右 2016 京ICP备15064386号-1