webpack深入学习（一）

概念

webpack是一个JavaScript应用程序的静态打包器
把js代码根据依赖关系生成一个或者多个bundle（包）进行使用

打包的整个过程涉及到四个重要概念：

1. 入口（entry）
2. 输出(output)
3. 加载器(loader)
4. 插件(plugins)

入口（entry）

webpack需要扫描程序构建依赖关系，总要有个起点，entry就是定义webpack开始的地方，默认值是./src
例子：

//webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口（output）

定义webpack打包后bundles的输出位置，默认是./dist
例子：

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

加载器（loader）

loader是webpac处理非JavaScript文件（图片文件，css样式文件，TXT文件。。。）的工具，它能把大部分类型的文件转换成为webpack能处理的bundles
在webpack的中loader有两个配置，主要是配置在module的rules中：

1. test属性，用于定义loader需要处理那些类型的文件（正则表达式）
2. use属性，用来定义用什么loader来处理文件（loader的名字）

//webpack.config.js
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

上面的配置中就定义了用raw-loader来处理*.txt文件

插件(plugins)

插件的功能就比loader更加广泛，可以对模块进行 打包 优化 压缩 甚至重新 定义环境中的变量 。能根据开发需求去定义自己需要的插件
是用一个插件首先你需要require() 它，然后再添加到plugins中。

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;