webpack4打包nodejs项目进阶版——多页应用模板

前段时间我写了个打包nodejs项目的文章，点击前往

但是，问题很多。因为之前的项目是个历史遗留项目，重构起来可能会爆炸，当时又比较急所以就写个的适用范围很小的webpack的打包方法。

最近稍微得空，便动了重构的心思，重构第一步当然要把架子搭起来

而搭架子的过程也是十分地艰辛啊，终于大概搞定了前端的部分，这一次就分享一下使用最新的webpack4怎么打包nodejs的多页应用

欢迎大佬留言交流，想要源码的点此前往github

工程目录

走个流程先上个项目结构图

这里先说明一下，为什么除了webpack.config.js这个配置文件之外还有一个config文件夹存放相关配置文件

因为webpack分为了开发环境和生产环境，两者在配置和表现形式上有所区别，放在一个文件中不利于维护

这也算是一种解耦吧。

至于其他的一些文件我这里就大概提一下：

1.babelrc 配置babel-loader 用于将ES6+的JS代码转为ES5的通用JS

2.eslint 主要用于代码的在线纠错，以及一些语法错误的查找

3.用于 git 的配置配置哪些文件需要上传到git

4. package.json就是用于设置项目信息，以及项目的依赖

5.postcss 用于配置postcss 主要用于修复浏览器兼容的问题

6, yarn 就是一个进阶版的npm 可以并行下载 缓存等（由facebook 研发）

以上就是整个架子的大概模板

接下来进入主题——webpack的相关配置

cross-env跨平台设置环境变量

通过cross-env 来判断当前的环境（即生产环境、开发环境）

用法如下：

在package.json中设置启动命令

将 NODE_ENV 设置为不同的值

根据该值来判断当前的环境

Webpack.config.js

通常来说该文件就是webpack 的核心配置文件

但为降低不同环境的耦合度，使代码逻辑更加清晰

我使用这个文件作为一个“路由” 根据之前的 NODE_ENV 去请求不同的webpack配置文件

代码如下：

为了兼容VUE等框架所以我的ESlint 设为不以分号结尾

config文件夹

我所有的webpack配置文件夹都存放在该文件夹下

上方要获取的配置文件都在这里

我的想法是在base.js 中存放两种环境的公共代码

dev.js、prod.js 存放对应环境的特殊配置代码

最后输出的文件只能有一个webpack的配置文件

所以使用

webpack-merge

来合并两个webpack配置文件

webpack基础配置

下面我们来一 一分析每个配置文件

首先就是base.js

代码如下：

/**
 * webpack 基础配置
 */
const webpack = require('webpack')

const path = require('path')

const fs = require('fs')

const Entries = {} // 保存文件入口
const pages = []// 存放html-webpack-plugin实例
const env = process.env.NODE_ENV !== 'prod' // 判断运行环境
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入mini-css-extract-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

//  获取html-webpack-plugin实例集合
(function () {
  let pagePath = path.join(__dirname, '../src/page')// 定义存放html页面的文件夹路径
  let paths = fs.readdirSync(pagePath) // 获取pagePath路径下的所有文件
  paths.forEach(page => {
    page = page.split('.')[0]// 获取文件名（不带后缀）
    pages.push(new HtmlWebpackPlugin({
      filename: `views/${page}.html`, // 生成的html文件的路径（基于出口配置里的path）
      template: path.resolve(__dirname, `../src/page/${page}.html`), // 参考的html模板文件
      chunks: [page, '[name]', 'commons', 'vendors', 'manifest'], // 配置生成的html引入的公共代码块 引入顺序从右至左
      favicon: path.resolve(__dirname, '../src/img/favicon.ico'), // 配置每个html页面的favicon
      minify: {// 配置生成的html文件的压缩配置
        collapseWhitespace: true,
        collapseInlineTagWhitespace: true,
        conservativeCollapse: true,
        minifyCSS: true,
        minifyJS: true,
        removeComments: true,
        trimCustomFragments: true
      }
    }))
    Entries[page] = path.resolve(__dirname, `../src/js/${page}.js`)// 入口js文件
  })
})()

module.exports = {
  // 配置入口文件
  entry: Entries,
  // 启用 sourceMap
  devtool: 'cheap-module-source-map',
  // mode为none表示这是默认配置
  mode: 'none',
  // 配置文件出口
  output: {
    // 将打包好的js输出到public（静态资源目录）下的js文件夹中
    filename: 'public/js/[name].bundle.[hash].js',
    path: path.resolve(__dirname, '../dist'), // 输出目录，所有文件的输出路径都基于此路径之上(需要绝对路径)
    publicPath: '../'
  },
  // 省略文件后缀
  resolve: {
    extensions: ['.js'] // 配置过后，书写该类文件路径的时候可以省略文件后缀
  },
  // loader
  module: {
    rules: [
      // 使用expose处理JQuery（JQ使用npm安装）配置了这一条后就不要使用external（主要用于cdn引入）
      {
        test: require.resolve('jquery'), // 此loader配置项的目标是NPM中的jquery
        loader: 'expose-loader?$!expose-loader?jQuery' // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
      },
      // 处理html中的图片，考虑到node使用模板的情况所以不能使用html-loader
      {
        test: /\.html$/,
        use: [{
          loader: 'html-withimg-loader' // 处理img标签中的图片
        }]
      },
      // 处理样式表
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          env ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(less)$/,
        use: [
          env ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
      // 使用babel处理js文件
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: 'babel-loader'
      },
      // 处理图片
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000, // 设置图像大小超过多少转存为单独图片
            name: 'public/img/[name].[hash].[ext]' // 转存的图片目录
          }
        }]
      },
      // 处理字体
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['url-loader']
      }
    ]
  },
  // 配置插件
  plugins: [
    // 分离tml-webpack-plugin实例数组、引入jq
    ...pages, new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery'
    })
  ],
  // 配置webpack执行相关
  performance: {
    maxEntrypointSize: 1000000, // 最大入口文件大小1M
    maxAssetSize: 1000000 // 最大资源文件大小1M
  }
}

关于上述代码

首先我们要配置的是入口：

我这里使用一个函数来遍历page文件夹中的所有html文件

这里我们约定对应html的js与html同名以便我们自动化生成入口对象

如下图所示：

这样我们就能使用html的名字来设置入口了，获取的入口对象如下:

该函数的另一个功能就是，根据html文件使用

html-webpack-plugin

来自动生成我们的html页面

看到这里或许有的小伙伴会有疑问，为啥不用html-loader来解析html文件然后打包进去？

正好我也解答一下一些，node项目中使用ejs等模板的小伙伴的疑问，不是html怎么办？

原因如下：

1.我这个架子主要考虑的是node项目，通常来说node不管是做中间层，还是做全栈都有可能会使用模板引擎

而html-loader无法解析ejs等模板语法

2.以ejs来举例，如果我使用ejs-loader来解析呢？如果使用ejs-loader那么只能适用于用ejs做组件化开发的

情况，而不能适用于使用ejs做数据渲染（中间层）的情况

3.那么在已经是ejs等模板的情况下的node项目怎么使用我的架子呢？

答案很简单，在app.js中加入以下代码（express），若还是不懂参考我上一篇初级版的webpack

4 从另一个方面来说将ejs等文件改为html文件有利于搜索引擎优化（小声哔哔）

关于入口和html的问题就解答到这

下一步我们就应该配置出口了

话不多说先上代码：

如果是搞node的小伙伴应该知道public（静态资源目录）

所以我将webpack打包后的文件输出到该目录下

关于publicpath 我这里用的相对路径，就是让webpack-server 的项目根路径和我的静态资源文件一致 不然 run dev 的时候会404

在这里提一下JQuery的问题，目前来说jq有三种引入方式

1.cdn 引入

2.import 本地文件

3.expose-loader 暴露出 npm 安装的jquery

这里我采用的是第三种方法

有几个好处

1.在页面中不用显式地引入jq了 （懒是人类进步的第一生产力）

2.使jq也纳入了npm模块化管理的范畴

3. 前面两点足够了，emm

代码如下

说完了jq的问题然后就是配置不同文件的loader了

详细代码在我的github上，帮到你们的小伙伴，跪求星星

基础配置中还有一件事

那就是performance

webpack默认入口点文件不能超过300k

超过后webpack会报warning

没有强迫症的小伙伴可以跳过了

有两个解决办法：

1.关掉webpack的警告（一看就不能选）

2.设置performance

设置如下：

好了基本配置就完成了

接下来要针对，不同环境进行独立的配置

开发环境配置

我先讲开发环境的配置，生产环境的坑有点多放到最后讲

对于开发环境来说，代码会经常修改而且，我们需要频繁地查看样式，所以我们并不需要对文件进行压缩等处理

并且要让它能够热更新即可，这里我们使用webpack-server

配置代码如下：

这里没啥要注意的，直接按着配，run就行运行出来像下面这样

页面如下：

具体的我就不演示了

还是那句话github见

接下来开始重头戏生产环境的配置

生产环境

为啥是重头戏呢？生产环境那就是线上环境啊，效率、大小就是钱啊

另外呢，主要是webpack4 和 min-css的配合有点问题，我这搭架子的时候搞的我头皮发麻

我不太清楚这是bug还是我的操作有啥问题

好了，进入正题

关于生产环境，主要的配置是：

1.要能够删除之前的过期文件，手动删多low啊

2.要压缩代码，用webpack的目的是啥，除了构建自动化的前端工作流之外，最主要的目的无非是压缩代码嘛

压缩代码的好处我这里就不说了，网上一搜一堆

好了开搞

首先清理过期代码：

这一步就完成了

下一步抽离css样式

这里要说一下，webpack4中抽离css要使用

mini-css-extract-plugin

原来的那个在webpack4不能使用

这里我要吐槽一下官网给的示例，坑了我一下

这里的两个属性是类似域output中的同名属性的，一般来说只用配置一个就行

另外可能就是这个插件有点bug

我先说一下我希望达到的效果

我希望将每个html的所有css作为一个单独文件

最好再将css的重复代码提取一下

如果不将css提取成一个单独的文件就没法CDN加速了啊

但是问题来了没法提取公共css代码，网上有的说用Extractcss那个插件的@next可以搞，我试了一下只能不重复打包，不能提取公共代码

我觉得人家既然专门为webpack4新出了一个，应该是有过人之处的，所以我就没有用这个方法

我就自己开始折腾，我试着用那个提取js重复代码的

splitChunks

我试了一下竟然可以处理css，但是有个问题，生成的公共CSS没法自动引入html页面

因为splitChunks是处理js的没法自动引入css

如果实在有提取公共css需求的小伙伴，页面又不多的情况（指你愿意手动引入）

不妨试试这种方法

主要步骤如下

在spplitChunks中创建缓存组过滤掉所有的js文件

然后再建一个优先级很低的缓存组，将剩下的文件中后缀为css的文件都强制提取到该组

用enforce:true 就可以提取出来，由于不是本文主题，也不知道是不是个bug，感兴趣的小伙伴可以留言我私聊，这里就不过多去讲了

继续来说，我这提不提取公共css影响不大

所以我的代码如下：

/**
 * 生产环境配置
 */

const webpackBase = require('./webpack.config.base') // 引入基础配置
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //  提取css
const webpackMerge = require('webpack-merge') // 引入 webpack-merge 插件
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清理dist文件夹

// 合并配置文件
module.exports = webpackMerge(webpackBase, {
  plugins: [
    new MiniCssExtractPlugin({// 提取出的Css的相关配置
      filename: 'public/css/[name].[hash].css' // 文件存放路径
    }),
    new CleanWebpackPlugin(['dist'], {// 自动清理 dist 文件夹
      root: path.resolve(__dirname, '../'), // 根目录
      verbose: true, // 开启在控制台输出信息
      dry: false // 启用删除文件
    })
  ],
  optimization: {
    minimize: true,
    splitChunks: {// 配置提取公共代码
      chunks: 'all',
      minSize: 30000, // 配置提取块的最小大小（即不同页面之间公用代码的大小）
      minChunks: 3, // 最小共享块数，即公共代码最少的重复次数一般设为3
      automaticNameDelimiter: '.', // 生成的名称指定要使用的分隔符
      cacheGroups: {// 设置缓存组
        vendors: {
          name: 'vendors',
          test (module) {
            let path = module.resource
            return /[\\/]node_modules[\\/]/.test(path) || /[\\/]lib[\\/]/.test(path)
          },
          priority: 30
        },
        commons: {
          name: 'commons',
          test: /\.js$/,
          enforce: true,
          priority: 20
        }
      }
    },
    runtimeChunk: {
      name: 'manifest' // 打包运行文件
    }
  }
})

这里我为js设置了两个缓存组，并提取出了运行时的manifest

一个是依赖的插件等js（满足3个页面引用）生成 vender.js

不满足3个或自己写的js提取到commons.js中

结语

以上就是webpack4 打包 nodejs 项目的架子，如果帮到你的小伙伴可以，关注我、收藏走一波

需要代码的小伙伴请移步github，原创不易，望支持

github链接

顺便再给我的JS高编读书笔记系列文章打个广告

有什么问题，欢迎留言，也欢迎大佬指正，共同进步。