webpack（模块打包器）@慕课网原创_慕课网

入门：https://www.jianshu.com/p/42e11515c10f

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

四个核心概念：

入口(entry) webpack 应该使用哪个模块，来作为构建其内部依赖图的开始；

module.exports = {
  entry: 'src/file.js'
};

输出(output) 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件；

const path = require('path');

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

loader 将所有类型的文件转换为 webpack 能够处理的有效模块，让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）；
插件(plugins) 功能极其强大，可以用来处理各种各样的任务，从打包优化和压缩，一直到重新定义环境中的变量。

Getting Started

本地项目，安装webpack

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install --save-dev webpack

目录结构

dist\index.html = index.html

<html>
  <head>
    <title>Getting Started</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- <script src="./src/index.js"></script> -->
    <script src="./bundle.js"></script>
  </body>
</html>

src\index.js

npm install --save lodash

// +
import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  // - Lodash, currently included via a script, is required for this line to work
  // + Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

执行命令

$ webpack src/index.js dist/bundle.js
Hash: cf2f3ca9f6261d90ade5
Version: webpack 3.10.0
Time: 534ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 357 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
    + 1 hidden module

页面效果

配置文件

在项目目录下新建个webpack.config.js文件。该配置文件上配置了webpack的相关执行效果

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

代替webpack src dist命令，配置文件代替CLI里的相关命令执行。

$ webpack --config webpack.config.js
Hash: cf2f3ca9f6261d90ade5
Version: webpack 3.10.0
Time: 517ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 357 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
    + 1 hidden module

上面的命令也可以直接写webpack，因执行webpack会自动调用webpack.config.js。