webpack：从入门到真实项目配置（二）

短命女 2022-06-08 07:40 168阅读 0赞

## 如何在项目中使用 webpack ##

项目中已经配置了很简单的 babel 和 webpack，直接运行 `npm run start` 即可

![960][]

这时候你会发现这个 bundle.js 居然有这么大，这肯定是不能接受的，所以接下来章节的主要目的就是将单个文件拆分

为多个文件，优化项目。

#### 分离代码 ####

先让我们考虑下缓存机制。对于代码中依赖的库很少会去主动升级版本，但是我们自己的代码却每时每刻都在变更，所

以我们可以考虑将依赖的库和自己的代码分割开来，这样用户在下一次使用应用时就可以尽量避免重复下载没有变更的

代码，那么既然要将依赖代码提取出来，我们需要变更下入口和出口的部分代码。

// 这是 packet.json 中 dependencies 下的
    const VENOR = ["faker",
      "lodash",
      "react",
      "react-dom",
      "react-input-range",
      "react-redux",
      "redux",
      "redux-form",
      "redux-thunk"
    ]
    
    module.exports = {
    // 之前我们都是使用了单文件入口
    // entry 同时也支持多文件入口，现在我们有两个入口
    // 一个是我们自己的代码，一个是依赖库的代码
      entry: {
      // bundle 和 vendor 都是自己随便取名的，会映射到 [name] 中
        bundle: './src/index.js',
        vendor: VENOR
      },
      output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
      },
      // ...
     }

现在我们 build 一下，看看是否有惊喜出现

![960 1][]  
![960 2][]

真的有惊喜。。为什么 bundle 文件大小压根没变。这是因为 bundle 中也引入了依赖库的代码,刚才的步骤并没有抽取

bundle 中引入的代码，接下来让我们学习如何将共同的代码抽取出来。

#### 抽取共同代码 ####

在这小节我们使用 webpack 自带的插件 `CommonsChunkPlugin`。

module.exports = {
    //...
      output: {
        path: path.join(__dirname, 'dist'),
        // 既然我们希望缓存生效，就应该每次在更改代码以后修改文件名
        // [chunkhash]会自动根据文件是否更改而更换哈希
        filename: '[name].[chunkhash].js'
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({
        // vendor 的意义和之前相同
        // manifest文件是将每次打包都会更改的东西单独提取出来，保证没有更改的代码无需重新打包，这样可以加快打包速度      names: ['vendor', 'manifest'],
          // 配合 manifest 文件使用
          minChunks: Infinity
        })
      ]
    };

当我们重新 build 以后，会发现 bundle 文件很明显的减小了体积

![960 3][]

但是我们使用哈希来保证缓存的同时会发现每次 build 都会生成不一样的文件，这时候我们引入另一个插件来帮助我们

删除不需要的文件。

npm install --save-dev clean-webpack-plugin

然后修改配置文件

module.exports = {
    //...
      plugins: [
      // 只删除 dist 文件夹下的 bundle 和 manifest 文件
        new CleanWebpackPlugin(['dist/bundle.*.js','dist/manifest.*.js'], {
        // 打印 log
          verbose: true,
          // 删除文件
          dry: false
        }),
      ]
    };

然后 build 的时候会发现以上文件被删除了。

因为我们现在将文件已经打包成三个 JS 了，以后也许会更多，每次新增 JS 文件我们都需要手动在 HTML 中新增标签，

现在我们可以通过一个插件来自动完成这个功能。

npm install html-webpack-plugin --save-dev

然后修改配置文件

module.exports = {
    //...
      plugins: [
      // 我们这里将之前的 HTML 文件当做模板
      // 注意在之前 HTML 文件中请务必删除之前引入的 JS 文件
        new HtmlWebpackPlugin({
          template: 'index.html'
        })
      ]
    };

执行 build 操作会发现同时生成了 HTML 文件，并且已经自动引入了 JS 文件

![960 4][]

#### 按需加载代码 ####

在这一小节我们将学习如何按需加载代码，在这之前的 vendor 入口我发现忘记加入 router 这个库了，大家可以加入这

个库并且重新 build 下，会发现 bundle 只有不到 300KB 了。

现在我们的 bundle 文件包含了我们全部的自己代码。但是当用户访问我们的首页时，其实我们根本无需让用户加载除了

首页以外的代码，这个优化我们可以通过路由的异步加载来完成。

现在修改 `src/router.js`

// 注意在最新版的 V4路由版本中，更改了按需加载的方式，如果安装了 V4版，可以自行前往官网学习
    import React from 'react';
    import { Router, Route, IndexRoute, hashHistory } from 'react-router';
    
    import Home from './components/Home';
    import ArtistMain from './components/artists/ArtistMain';
    
    const rootRoute = {
      component: Home,
      path: '/',
      indexRoute: { component: ArtistMain },
      childRoutes: [
        {
          path: 'artists/new',
          getComponent(location, cb) {
            System.import('./components/artists/ArtistCreate')
              .then(module => cb(null, module.default))
          }
        },
        {
          path: 'artists/:id/edit',
          getComponent(location, cb) {
            System.import('./components/artists/ArtistEdit')
              .then(module => cb(null, module.default))
          }
        },
        {
          path: 'artists/:id',
          getComponent(location, cb) {
            System.import('./components/artists/ArtistDetail')
              .then(module => cb(null, module.default))
          }
        }
      ]
    }
    
    const Routes = () => {
      return (
        <Router history={hashHistory} routes={rootRoute} /> ); }; export default Routes;

然后执行 build 命令，可以发现我们的 bundle 文件又瘦身了，并且新增了几个文件

![960 5][]

将 HTML 文件在浏览器中打开，当点击路由跳转时，可以在开发者工具中的 Network 一栏中看到加载了一个 JS 文件。

首页

![960 6][]

点击右上角 Random Artist 以后

![960 7][]

#### 自动刷新 ####

每次更新代码都需要执行依次 build，并且还要等上一会很麻烦，这一小节介绍如何使用自动刷新的功能。

首先安装插件

npm i --save-dev webpack-dev-server

然后修改 packet.json 文件

"scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --open"
      },

现在直接执行 `npm run dev` 可以发现浏览器自动打开了一个空的页面，并且在命令行中也多了新的输出

![960 8][]

等待编译完成以后，修改 JS 或者 CSS 文件，可以发现 webpack 自动帮我们完成了编译，并且只更新了需要更新的代码

![960 9][]

但是每次重新刷新页面对于 debug 来说很不友好，这时候就需要用到模块热替换了。但是因为项目中使用了 React，

并且 Vue 或者其他框架都有自己的一套 hot-loader，所以这里就略过了，有兴趣的可以自己学习下。

#### 生成生产环境代码 ####

现在我们可以将之前所学和一些新加的插件整合在一起，build 生产环境代码。

npm i --save-dev url-loader optimize-css-assets-webpack-plugin file-loader extract-text-webpack-plugin

修改 webpack 配置

修改 packet.json 文件

"scripts": {
        "build": "NODE_ENV=production webpack -p",
        "dev": "webpack-dev-server --open"
      }

执行 `npm run build`

![960 10][]

可以看到我们在经历了这么多步以后，将 bundle 缩小到了只有 27.1KB，像 vendor 这种常用的库我们一般可以使用

CDN 的方式外链进来。

## 补充 ##

webpack 配置上有些实用的小点在上文没有提到，统一在这里提一下。

module.exports = {
      resolve: {
      // 文件扩展名，写明以后就不需要每个文件写后缀
        extensions: ['.js', '.css', '.json'],
     // 路径别名，比如这里可以使用 css 指向 static/css 路径
        alias: {
          '@': resolve('src'),
          'css': resolve('static/css')
        }
      },
      // 生成 source-map，用于打断点，这里有好几个选项
      devtool: '#cheap-module-eval-source-map',
    }

[960]: https://user-gold-cdn.xitu.io/2017/9/15/95957c4402c35a8458ed848d1d193513?imageView2/0/w/1280/h/960
[960 1]: https://user-gold-cdn.xitu.io/2017/9/16/370471eb63feeaa72e86415e396141e3?imageView2/0/w/1280/h/960
[960 2]: https://user-gold-cdn.xitu.io/2017/9/16/48be1794942ddaf2f030bbb3a09de61a?imageView2/0/w/1280/h/960
[960 3]: https://user-gold-cdn.xitu.io/2017/9/16/0a0617d1f53173638cf9da06769bea27?imageView2/0/w/1280/h/960
[960 4]: https://user-gold-cdn.xitu.io/2017/9/17/f8a5991239c5aa45f845d1d9d4afe05d?imageView2/0/w/1280/h/960
[960 5]: https://user-gold-cdn.xitu.io/2017/9/17/8e48f667bb4313db100105b7dc34cdb2?imageView2/0/w/1280/h/960
[960 6]: https://user-gold-cdn.xitu.io/2017/9/17/a5a9c677fc770d8a99bbed9e79fdd730?imageView2/0/w/1280/h/960
[960 7]: https://user-gold-cdn.xitu.io/2017/9/17/93e7c9d86eeb7076b6f5e7434b0012e9?imageView2/0/w/1280/h/960
[960 8]: https://user-gold-cdn.xitu.io/2017/9/17/43f5b70bd82152ce21379120dfab8d71?imageView2/0/w/1280/h/960
[960 9]: https://user-gold-cdn.xitu.io/2017/9/17/7a5769363d0782abc59902d370c52472?imageView2/0/w/1280/h/960
[960 10]: https://user-gold-cdn.xitu.io/2017/9/17/ff8acf374946ee6db118117f22ec48f5?imageView2/0/w/1280/h/960