w-vue-middle/webpack.build.conf.js

统一公共服务组件

var path = require('path')
var webpack = require('webpack')
var VueLoaderPlugin = require('vue-loader/lib/plugin')

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  entry: './enter.js',
  output: {
    path: path.resolve(__dirname, './lib'),
    publicPath: '/lib/',
    filename: 'index.js',  // 输出文件名
    library: 'w-vue-middle', // 组件库名称
    libraryTarget: 'umd',  //模块化格式
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.less$/,
      use: ["style-loader", "css-loader", "less-loader"]
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        "presets": [
          "@babel/preset-env",
          "@vue/babel-preset-jsx"
        ]
      }
    }, {
      test: /.vue$/,
      loader: "vue-loader"
    },
      {
        test: /\.(svg)(\?.*)?$/,
        use: [{
          loader: 'svg-sprite-loader',
          options: {
            symbolId: "icon-[name]", // 保持与vue文件一致
          },
        }],
      },
      {
        test: /\.(png|jpe?g|gif)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: { limit: 10000, name: 'fonts/[name].[hash:7].[ext]' }
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('./'),
    },
    extensions: ['.js', '.jsx', '.vue']
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
}