vue.js多页面开发 webpack.config.js 配置方式

配置文件代码

var path = require('path')
var webpack = require('webpack')
var glob = require('glob');
复制代码

得到入口文件

// 源文件目录
var sSystem = 'src/';
// src目录如下

每个文件夹下的.js文件都会打包
components文件夹为组件
// 生成多个入口文件

function getEntry() {
    var entry = {};
    var nLength = sSystem.length - 1;
    var srcDirName = './' + sSystem + '/**/*.js';
    
    glob.sync(srcDirName).forEach(function (name) {
        //name:./src/ovdream/basic/member/index/index.js
        var n = name.slice(name.lastIndexOf(sSystem) + nLength, name.length - 3);
        //n:/member/index/index
        entry[n] = name;
    });
    return entry;
}
复制代码

exports

module.exports = {

    entry: getEntry(),
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: '[name].js'
    },
    module: {
        rules: [
          {
              test: /\.css$/,
              use: [
                'vue-style-loader',
                'css-loader'
              ],
          },
          {
              test: /\.vue$/,
              loader: 'vue-loader',
              options: {
                  loaders: {
                      // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                      // the "scss" and "sass" values for the lang attribute to the right configs here.
                      // other preprocessors should work out of the box, no loader config like this necessary.
                  }
                  // other vue-loader options go here
              }
          },
          {
              test: /\.js$/,
              loader: 'babel-loader',
              exclude: /node_modules/
          },
          {
              test: /\.(png|jpg|gif|svg)$/,
              loader: 'file-loader',
              options: {
                  name: '[name].[ext]?[hash]'
              }
          }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {

    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: '"production"'
          }
      }),
      new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
              warnings: false
          }
      }),
      new webpack.LoaderOptionsPlugin({
          minimize: true
      })
    ])
}
复制代码