基于Webpack的多目录框架打包

直接用vue-cli创建的项目可以创建一个单页面应用，开发环境和生产环境都是以一个单独的项目为目录的。但是在写一些有共性的模块时需要将所有组件放在同一个大的框架下的同时又需要每个模块可以进行单独的启动和打包。此时就需要进行个性化配置。本文将介绍两种方案，其中主要介绍webpack的多目录配置。

pages多目录配置

这种方案需要基于vue-cli3及以上的版本。优点是快捷方便稳定，适合绝大部分的开发场景。缺点是可配置性较差。

目录格式

目录格式大致如下，其实就是常见的src文件内部挪一层就行。

vue.config.js配置

配置也很简单，在pages参数里面配置入口即可。更多的配置项可参考pages配置

module.exports = {
   
   
  pages: {
   
   
    index: {
   
   
      // page 的入口
      entry: 'src/page1/main.js',
    },
    page2: 'src/page2/main.js'
  }
}

使用

与单目录情况类似，执行npm run serve会启动开发模式。所有子项目都会启动，在不同的路有页面

http://localhost:8081/page2 // page1项目
http://localhost:8081/page2 // page2项目

打包则同时打包所有项目：

webpack配置多目录打包

通用性强的往往针对单个项目的适配性就会差一些，反之亦然。pages可以解决大部分开发环境，但如果需要可配置性强可以自己进行针对项目及业务优化配置的话最好采用webpack自行配置的方案，如技术类框架对于开发便捷性及项目性能及配置性有更高需求的场景。

项目目录

此时构建的目录结构大致如下：
—build
—config
—node_modules
—src
——common
————js
————css
————pic
————components
——module
————head
—————index.html
—————src
———————assets
———————components
———————router
———————app.vue
———————main.js
————face
————hand
————body
————foot
——package
—package.json

具体实现

需要对webpack打包文件进行配置，可以使用以下命令启动和打包单独的模块：

npm run dev <module name>
npm run build <module name>

为实现以上目的，首先要看一下webpack打包单项目的常见配置：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  }

关于package.json中的script配置：npm 允许在package.json文件里面，使用scripts字段定义脚本命令
也就是说相当于运行npm run命令时会按照package.json中的命令来进行脚本运行而无需自己在命令行中输入那么长的脚本命令。关于npm script想了解更多的话可以看看阮一峰老师的npm scripts 使用指南

首先对开发环境的dev命令运行进行配置更改，原配置中执行dev实际上运行的是
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
这条命令启动webpack-dev-server模块并将配置参数传入，关于配置参数--是webpack声明参数的方式，在我们运行dev时传入的参数包括：

• inline： 布尔值，用于在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本将插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。也可以使用 iframe 模式，它在通知栏下面使用 <iframe> 标签，包含了关于构建的消息。当inline的值为false时启用iframe模式。
• progess：该配置只用于命令行工具，用于将运行进度输出到控制台。
• config：配置信息，在此处传入build/webpack.dev.conf.js。运行由配置文件导出的函数，并且等待 Promise 返回。便于需要异步地加载所需的配置变量。

那么对于开发模式的修改就应当时从配置文件webpack.dev.conf.js入手了。先来看原有配置

const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

// 与webpack.base.conf进行合并
const devWebpackConfig = merge(baseWebpackConfig, {
   
   
  module: {
   
   
    rules: utils.styleLoaders({
   
    sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
   
   
    clientLogLevel: 'warning',
    historyApiFallback: {
   
   
      rewrites: [
        {
   
    from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? {
   
    warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
   
   
      poll: config.dev.poll,
    }
  },
  plugins: [
    // 允许在编译时(compile time)配置的全局常量
    new webpack.DefinePlugin({
   
   
      'process.env': require('../config/dev.env')
    }),
    // 启用模块热替换
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    // 在输出阶段时，遇到编译错误跳过
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    // 简单创建 HTML 文件，用于服务器访问
    new HtmlWebpackPlugin({
   
   
      // 要将HTML写入的文件
      filename: 'index.html',
      // 本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)
      template: 'index.html',
      // 传递true或'body'所有javascript资源将被放置在body元素的底部。'head'将脚本放在head元素中
      inject: true
    }),
    // copy custom static assets
    // 将单个文件或整个目录复制到构建目录
    new CopyWebpackPlugin([
      {
   
   
        from