详解vue-cli + webpack 多页面实例配置优化方法

# 安装
npm install

# 调试环境 serve with hot reload at http://localhost:8083/module/login.html
npm run dev

# 生产环境 build for production with minification
npm run build

webpack
 |---build
  |---src
   |---assets 资源
     |---css.css css
     |---img 图片文件
     |---font/ 字体图标
   |---components 组件
      |---Button.vue 按钮组件
     |---module-head.vue head组件
   |---module各个页面模块
    |---login  登陆模块
     |---login.html
     |---login.js
     |---app.vue
    |---welcome    欢迎页模块
     |---welcome.html
     |---welcome.js
     |---app.vue

 |---login  登陆模块
  |---login.html
  |---login.js
  |---app.vue

import Lib from 'assets/Lib.js'

# 导入全局的css
import 'assets/css.css';
# 导入全局的站点配置文件
import C from 'assets/conf';
# 导入全局的共用事件
import M from 'assets/common';

var Rxports = {
  M,C
};

module.exports = Rxports

import Lib from 'assets/Lib.js'
Lib.C.appname; # 蓝锅锅

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
 <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

# 储存站点的配置，例如web的名称、LOGO地址等
import C from 'assets/conf';
# 导入全局的共用事件，例如在微信的JS SDK初始化，每个页面都要分享，都需要初始化的，一次调用，全局使用，棒！！
import M from 'assets/common';

import Button from 'components/Button';

import Button from 'components/Button';
export default {
 data() {
  return {
    
  }
 },
 components: {
  # 在这里注册组件，不注册组件的话，是无法使用的。
  Button  
 } 
}

<i class="iconfont">&#33</i>

# 【webpack.base.conf.js】主要是构建的全局设置，主要是增加了以下代码，已经增加在JS文件里，这里只是做一个补充说明，具体请看`build/webpack.base.conf.js`。

var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
var chunks = Object.keys(entries);

plugins: [
  // 提取公共模块
  new webpack.optimize.CommonsChunkPlugin({
   name: 'vendors', // 公共模块的名称
   chunks: chunks, // chunks是需要提取的模块
   minChunks: chunks.length
  }),
  // 配置提取出的样式文件
  new ExtractTextPlugin('css/[name].css')
 ]

function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
 });
 
 return entries;
}

<script type='text/javascript' src='vendors.61714a310523a3df9869.js' charset='utf-8'></script>
<script type='text/javascript' src='vendors.js?f3aaf25de220e214f84e' charset='utf-8'></script>

module.exports = {
 entry: entries,
 output: {
  path: config.build.assetsRoot,
  publicPath: config.build.assetsPublicPath,
  /* ---- 生成的例子 vendors.61714a310523a3df9869.js --- */
  //filename: '[name].[hash].js'
  /* ---- 生成的例子 vendors.js?f3aaf25de220e214f84e --- */
  filename: '[name].js'
 }
}