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文档

喻小右