Webpack教程

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。注意：Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换

安装

我们要使用 npm 来安装 webpack。

1. 为了让你更了解 npm，我们要做两件事（可不做）

   1. 运行 npm config set loglevel http，让你知道 npm 发的每一个请求
   2. 运行 npm config set progress false，关闭那个进度条

2. 为了让你的安装速度变快，运行 npm config set registry https://registry.npm.taobao.org/

   1. 这会让你在运行 npm adduser 的时候出问题，想要恢复成原样，只需要 npm config delete registry 即可

3. 现在，使用 npm i -g webpack，正式安装 webpack

   1. 如果报错说有权限问题，就是用 sudo npm i -g webpack
   2. Windows 里没有 sudo，那么你只能「以管理员身份运行」Git Bash，然后再运行命令

4. 验证安装成功
   运行 webpack --help 如果看到类似下面的信息，就说明安装成功

   webpack 1.14.0
   Usage: https://webpack.github.io/docs/cli.html
   ...
   ...
   --display-cached-assets
   --display-reasons, --verbose, -v
   
   

ES Modules

终于安装好了，可以开始使用 Webpack 了吗？

不行，我们有一个重要的知识需要学习一下，那就是 ES 模块，也就是 import 和 export 两个关键字。

请先到 MDN 上了解一下它们的用法：

import 用法

export 用法

Webpack的使用

接来下，我们直接来使用Webpack吧。

1. 随意建个目录，比如 webpack-demo

2. 进入目录后，将官网的例子弄到本地，结果如下：

    .
    ├── app.js
    ├── bar.js
    ├── page.html
    └── webpack.config.js
   
   

3. 按照官网说的，运行 webpack，看到如下结果：

    Hash: a5d289a022d184d8fbff
    Version: webpack 1.14.0
    Time: 36ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.42 kB       0  [emitted]  main
       [0] ./app.js 33 bytes {0} [built]
   
   

4. 打开 page.html，F12 打开控制台，居然报错了！！！

    Uncaught SyntaxError: Unexpected token import
   
   

   不靠谱的官网

5. 只能 copy 阮一峰的教程，把 webpack.config.js 改成这样

    module.exports = {
      entry: './app.js',
      output: {
        filename: 'bundle.js'
      },
      module: {
        loaders:[
          {
            test: /\.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel-loader?presets[]=es2015&presets[]=react'
          },
        ]
      }
    }
   
   

6. 再次运行 webpack，又出错：

    ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /tmp/webpack-demo
   
   

   是阮的问题吗？不是，他的教程里说了要安装一些 npm 包才能成功。
   上面的提示说没有 'babel-loader' ，我们试着安装一下：

    npm i babel-loader
   
   

   再次运行 webpack，它说需要安装 'babel-core'，跟上次的提示不一样了，看来只要我们一直安装下去就行了

    npm i babel-core
   
   

   再运行 webpack，提示变了：

    Module build failed: Error: Couldn't find preset "es2015" relative to directory "/tmp/webpack-demo"
   
   

   这次需要安装的是 babel-preset-es2015（不要问我为什么它不提示完整的名字）

    npm i babel-preset-es2015
    然后运行 webpack，看报错，知道需要安装 babel-preset-react
    npm i babel-preset-react
    然后运行 webpack，终于成功了……
    Hash: 4950c10e0d1d81a2a8f1
    Version: webpack 1.14.0
    Time: 475ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.83 kB       0  [emitted]  main
        + 2 hidden modules
   
   

7. 用浏览器打开 page.html，F12 打开控制台，终于没有报错了！