webpack学习

安装

我们要使用 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

copy：去 Webpack 的官网上找个例子来玩玩

https://webpack.js.org/

往下滚，看到例子

run：把例子弄到本地

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 打开控制台，终于没有报错了！

Modify

虽然没有报错，但是什么功能也没有啊！摔！再次吐槽 Webpack 官网。

我们来改一下 bar.js 吧：

export default function bar() {
  alert('Hello Webpack!')
}

重新运行 webpack，然后刷新 page.html。

如果你看到浏览器弹框说「Hello Webpack」，那么你就学会使用 Webpack 了。

原文链接地址