// index.js 

import { sayHello } from './module'; 

const element = document.createElement('h1'); 

element.innerHTML = sayHello('World'); 

document.body.appendChild(element);

如果你已经做到这一点，你的文件夹结构应如下所示：

/ 
| - node_modules/ 
| - src/ 
|    | - index.js 
|    | - module.js 
| - package.json

第3步：来自CLI的Webpack

由于您没有为项目创建配置文件，因此目前让webpack执行任何工作的唯一方法是通过webpack CLI。让我们进行快速测试。

在终端中，在项目的根目录中运行以下命令：

node_modules/.bin/webpack

运行此命令后，您应该看到如下输出：

No configuration file found and no output filename configured via CLI option. A configuration file could be named 'webpack.config.js' in the current directory. Use --help to display the CLI options.

该命令不执行任何操作，Webpack CLI确认了这一点。您没有向webpack提供有关要捆绑的文件的任何信息。您可以通过命令行或配置文件提供此信息。让我们选择前者只是为了测试一切是否正常：

node_modules/.bin/webpack src/index.js dist/bundle.js

你现在所做的是通过CLI 传递webpack entry文件和output文件。这个信息告诉webpack，“转到src/index.js并捆绑所有必要的代码dist/bundle.js”。它就是这样。您会注意到您现在有一个dist包含的目录bundle.js。

打开它并检查出来。在webpack中需要一些额外的javascript来完成它的工作，但是在文件的底部你也应该看到你自己的代码。

第4步：创建webpack配置文件

Webpack可以处理很多事情。我花了很多空闲时间潜入这个捆绑器，我仍然几乎没有划伤表面。一旦你移动了通过琐碎的例子，最好离开CLI并创建一个配置文件来处理繁重的工作。

在项目的根目录中，创建一个webpack.config.js文件：

touch webpack.config.js

此文件可能与您制作的文件一样复杂。为了这篇文章，我们会保持清醒：

// webpack.config.js 
const HtmlWebpackPlugin = require（'html-webpack-plugin'）;

module.exports = { 
  entry：'。/ src / index.js'，
  输出：{ 
    filename：'bundle.js'，
    path：'dist' 
  }，
  插件：[ 
    new HtmlWebpackPlugin（{title：'Tree-shaking'} ）
  ] 
}

此文件为webpack提供了之前提供给CLI的相同信息。你定义index.js为您的entry文件，并bundle.js为您的output文件。您还添加了html-webpack-plugin将在您的dist目录中生成HTML文件的内容。方便。

继续测试，以确保它仍然有效。删除dist目录，并在命令行中键入：

webpack

如果一切顺利，你可以打开dist/index.html并看到“Hello World！”。

注意：使用配置文件为我们提供了键入的便利webpack而不是node_modules/.bin/webpack。小胜。

第五步：巴别塔

我之前提到过，webpack 2为ES6模块提供了原生支持。这一切都是正确的，但它并没有改变所有浏览器都不完全支持ES6的事实。正因为如此，你需要变换使用类似的工具你ES6代码转换成易于接受的JavaScript 巴贝尔。与webpack结合使用，Babel使我们能够编写“未来的JavaScript”而无需担心不受支持的浏览器的含义。

让我们继续在您的项目中安装Babel：

npm i --save-dev babel-core babel-loader babel-PReset-es2015

记下babel-preset-es2015包裹。这个小家伙是我坐下来写下这一切的原因。

第6步： babel-loader

Webpack可以配置为通过加载器将特定文件转换为模块。转换后，将它们添加到依赖关系图中。Webpack使用该图来解析依赖关系，并且仅包括最终包中所需的内容。这是webpack如何工作的基础。

您现在可以配置webpack以用于babel-loader转换所有  .js文件：

// webpack.config.js 
const HtmlWebpackPlugin = require（'html-webpack-plugin'）;

module.exports = { 
  entry：'。/ src / index.js'，
  输出：{filename：'bundle.js'，path：'dist'}，
  module：{ 
    rules：[ 
      { 
        test：/\。js$/ ，
        exclude：/ node_modules /，
        loader：'babel-loader'，
        options：{             presets 
          ：[ 
'es2015' 
          ] 
        } 
      } 
    ] 
  }，
  plugins：[ 
    new HtmlWebpackPlugin（{title：'Tree-shaking'}）
  ] 
};

该module属性为webpack提供了一组说明。它说，“将所有文件结束  .js并使用它们进行转换babel-loader，但不要转换其中的任何文件node_modules！”

我们也将babel-preset-es2015包裹作为选项传递给babel-loader。这只是讲述了babel-loader如何转换JavaScript。

webpack再次运行以确保一切都很好。是？大！我们所做的就是捆绑你的JavaScript文件，同时将它们编译成可以跨浏览器轻松支持的JavaScript。

根本问题

该软件包babel-preset-es2015包含另一个名为的包babel-plugin-transform-es2015-modules-commonjs，可将所有ES6模块转换为CommonJS模块。这不是理想的，这就是原因。

诸如webpack和Rollup之类的Javascript捆绑器只能在具有静态结构的模块上执行树抖动。如果模块是静态的，那么捆绑器可以在构建时确定其结构，安全地删除未在任何地方导入的代码。

CommonJS模块没有静态结构。因此，webpack将无法从最终的捆绑包中破坏未使用的代码。幸运的是，Babel通过为开发人员提供了一个可以传递给您的presets阵列的选项来缓解这个问题babel-preset-es2015：

options: { presets: [ [ 'es2015', { modules: false } ] ] }

根据巴贝尔的文件：

“modules - 启用将ES6模块语法转换为另一种模块类型（默认情况下启用为“commonjs”）。可以是false不转换模块，或["amd", "umd", "Systemjs", "commonjs"]“。

将额外的代码滑入您的配置中，您将使用花生油烹饪。

最终状态webpack.config.js如下：

// webpack.config.js 
const HtmlWebpackPlugin = require（'html-webpack-plugin'）;

module.exports = { 
  entry：'。/ src / index.js'，
  输出：{filename：'bundle.js'，path：'dist'}，
  module：{ 
    rules：[ 
      { 
        test：/\。js$/ ，
        exclude：/ node_modules /，
        loader：'babel-loader'，
        options：{             presets 
          ：[ 
['es2015'，{modules：false}] 
          ] 
        } 
      } 
    ] 
  }，
  插件：[new HtmlWebpackPlugin（{title：'Tree-摇晃'}）] 
};

大结局

webpack再次运行并弹出您的bundle.js文件。你不会注意到任何差异。在你发疯之前，要知道这一点！没关系。我们一直在开发模式下运行webpack。Webpack知道您的代码中有未使用的导出。即使它包含在最终的捆绑包中，sayBye也永远不会进入生产阶段。

如果您仍然不相信我，请webpack -p在您的终端中运行。该-p选项代表生产。Webpack将执行一些额外的性能优化，包括缩小，在此过程中删除任何未使用的代码。

打开bundle.js。由于它已缩小，请继续搜索Hello。它应该在那里。搜索Bye。它不应该。

瞧！你现在在webpack 2中有一个工作的树摇动实现！