vue按需引用和打包

1、建一个webpack.component.js

'use strict'
const fs = require('fs');
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {
  VueLoaderPlugin
} = require('vue-loader');

// 整理入口
const Components = fs.readdirSync('./src/components'); //读要打包的文件
const dirs = Components.filter(v => {
  return fs.statSync(path.resolve('./src/components', v)).isDirectory();
});
const entrys = {};
dirs.forEach(v => {
  entrys[v] = `./src/components/${v}/index.js`;
});

const externals = [Object.assign({
  vue: 'vue',
}), nodeExternals()];

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

module.exports = {
  mode: 'production',
  entry: entrys,
  output: {
    path: path.resolve(process.cwd(), './lib/'),
    filename: `[name].js`,
    chunkFilename: '[id].js',
    libraryTarget: 'commonjs2'
  },
  externals: externals,
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      '@': resolve('../src'),
    },
    modules: ['node_modules']
  },
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|woff|woff2|svg|ttf|eot)$/,
        use: [{
          loader: 'url-loader',
          options: {
            name: '[name].[hash:5].[ext]',
            limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
            publicPath: '../fonts/',
            outputPath: '/fonts/',
          },
        }, ],
      },
      {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
           fallback: "style-loader",
           use: "css-loader"
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"]
         })
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.ProgressPlugin(),
    // extract css into its own file
   new ExtractTextPlugin({
    filename: 'theme/[name].css',
    allChunks: true
    }),
  ],
  optimization: {
    minimize: true,
  },
}

2、package.json文件加一个打包配置

"build-components": "npx webpack --config ./build/webpack.component.js",

3、配置好以后打包的过程 可能需要你装一些插件，看好错误提示就好了，例如：webpack
4、项目应用，可以参考element，
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

babel.config.js文件配置参考

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "name",
        "styleLibraryName":"theme",
        "styleLibrary": {
          "name": "theme",
          "base": false,
        }
      },
    ],
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }, "el"
    ]
  ]
}