webpack2.2 概念部分总结分析

introduce

• concepts

  webpack是现代js应用的模块打包器，它是非常可配置，但要明确以下四个概念。

  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;