webpack学习笔记丁点积累

webpack是什么？

https://webpack.js.org/concepts/

https://code.tutsplus.com/tutorials/introduction-to-webpack-part-1--cms-25791

webpack是一个为现代javascript application而生的module bundler:模块打包器。它支持非常多的配置，拥有强大的功能。但也正是因为这一点可能导致我们很多人一团雾水。在学习之前，先搞明白几个概念：

Entry

webpack经过编译后将会为你的application创建一张依赖图:dependency graph. 而这张依赖图的起点就被称之为： entry point. 这个entry point告诉webpakc从哪里开始根据扫描require(cmd), import(es6)等调用来不断描绘这张依赖图从而知道要打包哪些元素到最终的bundle中。

你可以将application的entry point看作 contextual root或者the first file to kick off your app

在webpack configuration object中，我们就使用entry这个属性来配置,最简单的例子：

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

entry point的设置有多种形式：

单个字符串：

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

数组字符串：

const config = {
  entry: ['./path/to/lib/library.js','./path/to/my/entry/main.js']
};

module.exports = config;

object syntax:

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

具体参考： https://webpack.js.org/concepts/entry-points/

Output

一旦你已经将你的assets全部打包在一起了，我们仍然需要告诉webpack应该将我们的application bundle放到哪里.

这是通过output 属性来定义：（output也会有很多其他的属性，比如filename,path...）

var path = require('path');

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

Loaders

Loader是webpack中非常重要的概念。webpack的目标是将项目中的所有assets都可以由webpack来打包，而不是直接放到浏览器那里（通过script tag, link tag css)去异步加载。（注意这也并不意味着这些assets都必须打包在一起，可以有些折中）. webpack将任何一个文件(.css,.html,.less,.scss,.jpg...)都视作一个javascript module.然而，webpack仅能够理解javascript!

而Loaders就能够将这些webpack本身并不能够理解和认识的文件转化为一个module从而加入到bundle的依赖树中去。

loader相关的配置从高层上讲有两个目的：

1. 指定什么文件类型应该由一个Loader来transform (通过test 属性来完成)

2.  指定应该由哪个loader来transform作为bundle的输入

var 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;

上面的配置就像是我们要告诉webpack的编译器：

"

Hey webpack compiler,when you come across a path that resolves to a '.js' or '.jsx' file inside of a require/import statement, use the babel-loader to transform it before you add it to the bundle

"

Plugin

Loader本身只能对一个个文件来做transform,而plugin则通常用于对bundled module的chunks或者compilations执行一些特定的action并且定制部分功能。要使用一个plugin,我们需要require()，并且放在plugins属性中。

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

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

module.exports = config;

 webpack的依赖分析

方法： profile: true配置，使用一个plugin来生成stats.json文件https://github.com/unindented/stats-webpack-plugin,随后在http://webpack.github.io/analyse页面选择这个stats.json文件就能分析出来下面的图形来，好强大，好梦幻！