vue + webpack 多页实例配置 --vue-cli
发布在vue2016年9月8日view:2207前端开发Web组件,模块化web框架Vue.jswebwebpack
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

项目文件结构

|---build  //webpack的文件、配置参数
  |---build.js
  |---dev-client.js
  |---dev-server.js 
  |---utils.js
  |---webpack.base.conf.js 
  |---webpack.dev.conf.js
  |---webpack.prod.conf.js
| ***|
|---src
  |---assets 资源
  |---components组件
  |---module   //各个模块
    |---admin   //admin模块
      |---index.html
      |---admin.js
    |---page     //page模块
      |---page.html
      |---page.js

Webpack 配置

修改webpack.base.conf.js文件

var glob = require('glob');
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
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;
  });
  console.log(entries);
  return entries;
}

module.exports = {
  entry: entries,
  ***
}

修改webpack.dev.conf.js文件

var glob = require('glob');
module.exports = merge(baseWebpackConfig, {
  devtool: '#eval-source-map',
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
})

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;
  });
  console.log(entries);
  return entries;
}

var pages = getEntry('./src/module/**/*.html');

for (var pathname in pages) {
  // 配置生成的html文件,定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    inject: true              // js插入位置
  };
  // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

修改webpack.prod.conf.js文件

var glob = require('glob');
module.exports = merge(baseWebpackConfig, {
  ***
  plugins: [
    ***
    new webpack.optimize.OccurenceOrderPlugin(),
    new ExtractTextPlugin(path.join(config.build.assetsSubDirectory, '[name].[contenthash].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;
  });
  console.log(entries);
  return entries;
}

var pages = getEntry('./src/module/**/*.html');

for (var pathname in pages) {
  console.log(pathname);
  // 配置生成的html文件,定义路径等
  var conf = {
    // filename: pathname + '.html',
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    inject: true              // js插入位置
  };
  // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

注意:一定要 npm install glob 模块到项目中

运行

npm run dev后会发现有多个入口

enter image description here

浏览器访问

enter image description here

enter image description here

参考:https://github.com/yaoyao1987/vue-cli-multipage

评论
发表评论
暂无评论
WRITTEN BY
执笔的蜗牛
Life is like the ocean
TA的新浪微博
PUBLISHED IN
vue

Vue.js 是尤大大开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。

此专栏专门记录我学习vue的过程中遇到的困难和总结

我的收藏