webpack入门篇-理解入口、输出、加载器和插件

webpack是一个模块打包器（module bundler），它不同于Gulp，Gulp是一个任务执行器（task runner）。任务执行器可以自动化处理常见的开发任务，比如代码检测、代码构建等等。webpack之所以流行，是因为它的功能太强大了，它不仅可以用来打包模块，它的插件系统把任务执行器的工作也兼并了

下面主要介绍webpack中的四个核心概念：入口（entry）、输出（output）、加载器（loader）和插件（plugins）

入口

webpack会自动创建应用程序的依赖关系图表，图表的起点就是webpack的入口。webpack可以根据依赖关系图知道要打包什么，可以把入口起点认为是app的第一个启动文件

简单写法

entry: string | Array<string>

module.exports = {
  entry: './src/main.js'
}

module.exports = {
  entry: ['./src/main.js', './src/main2.js']
}

对象写法

entry: {[entryChunkName: string]: string|Array<string>}

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

输出

入口把所有要打包的资源归拢到一起后，需要告诉webpack在哪里输出打包好的应用程序。输出描述了如何处理归拢在一起的代码(bundled code)

var path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

output.filename和output.path是两个必选属性，来告诉webpack bundle的名称，以及想要生成(emit)到哪里

如果是多入口文件打包，在输出的时候，filename不能为确定的名称，可以是[id]、[name]、[chunkhash]、[hash]

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),//出口路径
    filename: '[name].js'//出口名称
  }
}

output还用很多可选的配置属性，平时用的并不多，这里不多做介绍

加载器

webpack本身只能处理JavaScript模块，如果是其他类型的文件，需要使用loader进行转换。比如我们熟悉的.css的文件，需要用css-loader和style-loader转换后才能正常工作。loader本身其实是一个函数，接收源文件作为参数，返回转换后的结果。

module.exports = {
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  }
}

loader的读取顺序是从右至左，当匹配到css文件时，先用 css-loader 来读取它，再用 style-loader 把它插入到页面中。loader的添加需要配置到module对象的rules属性中，rules属性必须包含test和use

插件

插件可以完成loader不能完成的工作，比如代码压缩、规则检查等等。插件其实相当于任务执行器，可以在代码打包过程中执行一些自定义功能

webpack本身内置了一些常用插件，在使用的时候无需单独引入。以BannerPlugin 这个内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

var webpack = require('webpack');
module.exports = {
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('Author info')
  ]
}

对于第三方插件，使用时需要单独引入，可以在社区里找到很多强大的开源插件

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('Author info'),
    new HtmlWebpackPlugin({
      title: 'Document title'
    })
  ]
}

命令行

webpack提供了命令行接口（cli），下面是一些比较常用的命令

1. 列出命令行所有可用的配置选项

webpack --help
webpack -h

2. 指定其它的配置文件，配置文件默认为 webpack.config.js，如果想使用其它配置文件，可以加入这个参数

webpack --config example.config.js

3. 打印出编译进度的百分比值

webpack --progress

4. 观察文件系统的变化

webpack --watch
webpack -w