在多页面项目下使用 Webpack + Vue
JavaScript HTML Vue CSS
Permalink
Failed to load latest commit information.
Application/Home/View first-commit Mar 9, 2016
Public first-commit Mar 9, 2016
source first-commit Mar 9, 2016
.gitignore first-commit Mar 9, 2016
README.md resolve #4 Jan 15, 2017
package.json first-commit Mar 9, 2016
webpack.config.js update README Jan 13, 2017

README.md

在多页面项目下使用 Webpack + Vue

前言

webpack + vue 能很好的完成单页面应用的开发,官方也提供了很多例子和教程。但使用 webpack 能不能用到多页面项目中,同时又能使用 vue 进行模块组件化开发呢?

这里将结合具体的项目,说明一下我是如何配置的。我们希望能在项目里做到

  • 在每个业务模块下会有很多页面,每个页面都是一个文件夹,所需的资源文件也都放在这个文件夹下
  • 采用 vue + es6 的方式进行组件模块化开发
  • 生成自动引用 webpack 打包好的 js 文件到项目需要的目录
  • 具有良好的开发支持,拥有如 sourseMap,vue 组件的热替换

下面是我们项目的目录结构

项目目录结构

    ├─Application (thinkphp 配置下的结构,可以结合自己项目做修改)
    │  └─Home
    │      └─View (线上用户访问的.html目录)
    │         └─index (生成的一个模块)
    │             ├─index.html (同一模块的模板放在一个模块目录下)
    │             └─info.html
    ├─Public (线上资源文件目录)
    │  ├─css
    │  ├─imgs
    │  ├─js
    │  └─...
    └─source (前端开发目录)
        ├─another (一个业务模块,每个业务下可能有多个页面)
        │  └─index
        │      ├─app.vue
        │      ├─index.html
        │      ├─index.js
        │      └─static (资源文件)
        ├─components (vue组件目录)
        │  ├─A
        │  │ ├─A.vue
        │  │      
        │  └─B
        │    ├─B.vue
        │          
        └─index (一个业务模块,每个业务下可能有多个页面)
            ├─index
            │  ├─app.vue
            │  ├─index.html
            │  ├─index.js
            │  └─static
            └─info
               └─info.html

页面文件

每个页面都是一个文件夹,所需的资源文件也都放在这个文件夹下,不需要这个页面时,也只需要删除这个文件夹。

下面是 index 模块下的 index 页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>index - Vue Webpack Example</title>
    <!-- webpack 会将入口 JS 文件引入的 CSS 或者 vue 组件中的 css 生成 style 标签或者生成独立的 css 文件并使用 Link 标签加载它 -->
  </head>
  <body>
    <app></app>
    <!-- webpack 的 HtmlWebpackPlugin 插件会根据入口JS文件生成 script 标签并插入在这里或实现按需加载 -->
  </body>
</html>

上面是 index 页面的 html 模板,我们无需引入任何 css 和 js ,webpack 会自动帮我打包引入。

其中的 app 标签是我们的 vue 组件,webpac k的加载器会帮我们处理 js 文件中引入的 vue 组件,这样就能正确处理这个标签。

下面 index 页面对应的 js 入口文件

import Vue from 'vue'
import App from './app'

new Vue({
  el: 'body',
  components: { App }
})

Webpack 配置文件

用法

先说下 demo 的运行命令

# 首先安装依赖
npm install

# 开发模式
# 注意非 Windows 环境在 package.json 将开发模式的命令改成:
# NODE_ENV=production webpack
npm run dev

# 打包
npm run build

配置

下面是 webpack 的配置文件 webpack.config.js,其中用注释指出了关键配置。

var path = require('path');
var webpack = require('webpack');
// 将样式提取到单独的 css 文件中,而不是打包到 js 文件或使用 style 标签插入在 head 标签中
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 生成自动引用 js 文件的 HTML
var HtmlWebpackPlugin = require('html-webpack-plugin');
var glob = require('glob');

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

module.exports = {
  entry: entries,
  output: {
    path: path.resolve(__dirname, 'Public'), // html,css,js,图片等资源文件的输出路径,将所有资源文件放在 Public 目录
    publicPath: '/Public/',                  // html,css,js,图片等资源文件的 server 上的路径
    filename: 'js/[name].[hash].js',         // 每个入口 js 文件的生成配置
    chunkFilename: 'js/[id].[hash].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue']
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        // 使用提取 css 文件的插件,能帮我们提取 webpack 中引用的和 vue 组件中使用的样式
        loader: ExtractTextPlugin.extract('style', 'css')
      },
      {
        // vue-loader,加载 vue 组件
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        // 使用 es6 开发,这个加载器帮我们处理
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        // 图片加载器,较小的图片转成 base64
        loader: 'url',
        query: {
          limit: 10000,
          name: './imgs/[name].[ext]?[hash:7]'
        }
      }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  vue: { // vue 的配置
    loaders: {
      js: 'babel',
      css: ExtractTextPlugin.extract('vue-style-loader', 'css-loader')
    }
  },
  plugins: [
    // 提取公共模块
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors', // 公共模块的名称
      chunks: chunks,  // chunks是需要提取的模块
      minChunks: chunks.length
    }),
    // 配置提取出的样式文件
    new ExtractTextPlugin('css/[name].css')
  ]
};

var prod = process.env.NODE_ENV === 'production';
module.exports.plugins = (module.exports.plugins || []);
if (prod) {
  module.exports.devtool = 'source-map';
  module.exports.plugins = module.exports.plugins.concat([
    // 借鉴 vue 官方的生成环境配置
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ]);
} else {
  module.exports.devtool = 'eval-source-map';
  module.exports.output.publicPath = '/View/';
}

var pages = getEntry('./source/**/*.html');
for (var pathname in pages) {
  // 配置生成的 html 文件,定义路径等
  var conf = {
    filename: prod? '../Application/Home/View/' + pathname + '.html' : pathname + '.html', // html 文件输出路径
    template: pages[pathname], // 模板路径
    inject: true,              // js 插入位置
    minify: {
      removeComments: true,
      collapseWhitespace: false
    }
  };
  if (pathname in module.exports.entry) {
    conf.chunks = ['vendors', pathname];
    conf.hash = false;
  }
  // 需要生成几个 html 文件,就配置几个 HtmlWebpackPlugin 对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

// 根据项目具体需求,具体可以看上面的项目目录,输出正确的 js 和 html 路径
// 针对不同的需求可以做修改
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;

开发模式

运行 npm run dev 开发模式运行 demo

根据 webpack 配置文件中 output 的 publicPath 配置项和 HtmlWebpackPlugin 插件的 filename 配置项

demo 中 dev 环境下中分别是 /View 和pathname + '.html'

所以 demo 中通过 http://localhost:8080/View/another/index.html 可以访问到 another 模块下的 index 页面

打包

运行 npm run build 打包,可以看到 Application/Home/View 目录下成功生成了按模块分组的 html 文件,这正是项目需要的。

如 Application/Home/View/index 下的 index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>index - Vue Webpack Example</title>

  <link href="/Public/css/vendors.css" rel="stylesheet"><link href="/Public/css/index/index.css" rel="stylesheet"></head>
  <body>
    <app></app>

  <script src="/Public/js/vendors.91e0fac1fd8493060c99.js"></script><script src="/Public/js/index/index.91e0fac1fd8493060c99.js"></script></body>
</html>

venders.css 和 venders.js 文件是 webpack 插件帮我们自动生成的公共样式模块和公共 js 模块。打开页面,还能看到其他资源文件也都被正确处理了。

总结

总结一下 webpack 帮我们做了下面几件事

  • 使用 vue-loader 使我们能进行组件化开发。
  • 根据项目需求自动生成按模块分组的 html 文件。
  • 自动提取样式文件,并和打包后的 js 文件加入到自动生成的 html 文件。
  • 将 js 打包为不同的入口文件,并使用插件抽取公用模块。
  • 为开发调试提供需要的环境,包括热替换,sourceMap。