浅谈 webpack中基本的四个概念

     webpack是一款JavaScript程序的打包器。在写JavaScript程序的时候，webpack将根据工程中各个模块的依赖关系，生成一个依赖关系的图，然后按照“依赖关系图”（dependency graph）把这些模块打包成“捆”（bundle），由浏览器加载bunlde，渲染页面。

入口起点（Entry）

     所谓入口就是工程开始时的第一个（多个）要运行的脚本文件，通常它是依赖关系图的入口模块（一个或者多个），入口的配置项就一个，写清楚入口脚本的相对路径。入口通常也被认为是应用程序的根上下文（contextual root）或app的启动文件。

     入口的配置方式不止一种，以后详细讨论。

module.exports = {
    entry :'./path/to/my/entry/file.js'  //入口文件路径
};

出口（output）

     从入口模块开始，一直到真个依赖关系图上的所有模块，将这些资源（assets）打包（emit或emitted）成捆（bundle code）后，我们总得找个地方放置吧，这个地方就是出口output。

     出口的配置项有主要两个：1.放置打包后文件的路径，2.打包后的名字。

     还有其他配置项，以后讨论。

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）

     webpack默认只能打包.js文件，但我们工程里的资源（assets）很多，例如图片，.css文件，字体文件等也需要打包，此时需要用它们各自对应类型的加载器（Loader）来处理这些类型的文件。

     Loader会将对应类型的文件，添加到“依赖关系图”中，且将文件转换成模块。

     Loader的目标有两个：

1. 识别（identify）出应该被对应的loader进行转换（transform）的文件。
2. 把文件转换成模块，从而使它们能被添加到“依赖关系图”中，并最终添加到bundle中。

const path = require("path");

const config = {
   entry : './path/to/my/entry/file.js',   // 入口文件路径
   outpu ; {
       path : path.resolve(__dirname,'dist');  // 出口文件路径
       filename : 'my-fisrt-webpack-bundle.js'  // 出口文件名
   },
   module :{
       rules :[
          {
             test : /\.txt$/, // 告诉webpack的编辑器，在碰到.txt文件时，先用（use）raw-loader转换一下，再打包。
             use : 'raw-loader'
           }
       ]
   }
};
module.exports = config;

     Loader的详细内容，以后再讨论。

插件（Plugins）

     在各种程序中，插件总是被用来扩展项目功能的，webpack的插件（plugins）经常被用在打包模块的生命周期中的“compilation”和“chunk”阶段操作或定义扩展功能。

const HtmlWebpackPlugin = require('html-webpack-plugin');  // 引入插件模块
const webpack = require('webpack');                        // 引入webpack模块
const path = require('path');                              // 引入Node自带path模块。
// 配置文件对象
const config = {
    entry ; './path/to/my/entry/file.js',  // 入口路径
    output : {
       path : path.resolve(__dirname,'dist');  // 出口路径，是项目路径下，新加dist文件夹
       filename : 'my-first-webpack.bundle.js' // dist文件夹中，打包后的文件
    },
    module :{
        rules : [
            {
                test : /\.txt$/,                 // 正则表达式，选择所有.txt结尾的文件
                use : 'raw-loader'               // 将.txt结尾的文件，交给raw-loader加载器处理。
             }
        ]
    },
    plugins :[
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({
           template : './src/index.html'
        })
    ]
};
module.exports = config;