webpack 初探

1. Entry
webpack构建一个你应用程序依赖的图，起点便是所谓的erntry point。它告诉wenpack从哪开始并且
按照依赖图去知道什么要打包。可以将此比作 contextual root or the first file to kick off your app.。
The simplest example：
```
//webpack.config.js  
module.exports={
    entry:'./path/to/my/entry/file.js'
};
```
2. Output
一旦打包好了资源，依然需要告诉webpack哪里打包应用程序，output属性告诉webpack如何处理打包过的代码。
 The simplest example：
    ```
    //webpack.config.js  
    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属性告诉webpack包名和将之emit to哪。
3. Loaders
目的在于将所有项目中的资源作为webpack而非浏览器关心的。webpack眼中一切(.css,.hmtl,.scss,.jpg,etc)
皆模块。但其只知道js，而Loaders在webpack中将这些文件转化成依赖图中的模块。有两个目的在高水准要求上：
a.确定什么文件该被相应loader转换(test)，b：转换相应文件以加入到依赖图(use)。
```
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: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};
module.exports = config;
```
4. Plugins
因loaders仅基于每个文件转换，故plugins是最常用的对打包模块的 "compilations" or "chunks"执行操作和自定义功能等。
要用plugin需要用require()且将其放入plugins数组。多数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: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;
```