webpack学习（1）

概念

webpack是现在JavaScript应用程序打包生成器。当webpack在处理程序的时候，会递归的构建依赖关系图，其中包括应用程序所需要的每个模块，然后将这些模块打包成bundle由浏览器加载，通常只有一个。

首先我们先理解四个概念：

• 入口（ Entry）
  webpack创建程序的依赖关系图，那么是需要一个入口文件。入口文件告诉webpack是从哪里开始创建依赖关系图，然后根据依赖关系图进行打包所需要的文件。
  在webpack中我们通过webpack 配置对象(webpack configuration object) 中的entry属性进行设置入口文件。如下例子：

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

• 出口（Output）
  当所有的资源（assets）一起后，还需要在哪里告诉webpack打包应用程序，webpack的output属性告诉了我们在哪里处理归拢在一起的代码。

//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'
    }
};

如上，我们通过output.filename和output.path告诉了bundle的名称和以及要生成到哪里。

• Loader
  在webpack中可以将项目中任何的资源作为模块来进行对待，然后webpack自身只理解JavaScript。loader是在文件被添加到依赖图中时，其转换为模块。
  在较高层面中webpack中配置loader有两个目标：
  1. 识别应该被对应loader进行转换的那些文件（test属性）
  2. 转换这些文件，从而使其能够被添加到依赖图中，并且最终添加到bundle中。（use属性）

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

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

• 插件(Plugins)
  loader仅在每个文件的基础上进行转换，而插件更常用于在打包模块的“ compilation”和“ chunk”生命周期执行操作和自定义功能。
  如果想要使用插件，必须先通过require()该插件，然后将其添加进入plugins数组中，我们也可以因为不同的目的多次使用同一个插件，这时需要通过new创建一个它的实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;