refactor: 2.0

build/webpack.base.config.js

@@ -0,0 +1,48 @@
+const path = require('path')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      '@': path.join(__dirname, '..', 'src')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+            }
+          }
+        ]
+      },
+      {
+        test:/\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+      },
+      {
+        test: /\.js$/,
+        use: ['babel-loader'],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]?[hash]'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ]
+}

build/webpack.demo.config.js

@@ -0,0 +1,13 @@
+const merge = require('webpack-merge')
+const devWebpackConfig = require('./webpack.dev.config.js')
+
+const webpackConfig = merge(devWebpackConfig, {
+  devtool: 'source-map',
+  mode: 'production'
+  externals: {
+    'vue': 'Vue',
+    '@/index': 'DatePicker'
+  },
+})
+
+module.exports = webpackConfig

build/webpack.deploy.config.js

@@ -0,0 +1,50 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.config.js')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, '../lib'),
+    filename: 'index.js',
+    library: "DatePicker",
+    libraryTarget: "umd"
+  },
+  plugins: [
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: { safe: true }
+    })
+  ]
+})
+
+const webpackConfigExtractCss = merge(baseWebpackConfig, {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, '../lib'),
+    filename: 'datepicker.js',
+    library: "DatePicker",
+    libraryTarget: "umd"
+  },
+  module: {
+    rules: [
+      {
+        test:/\.scss$/,
+        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
+      },
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'datepicker.css'
+    }),
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: { safe: true }
+    })
+  ]
+})
+
+module.exports = [ webpackConfig, webpackConfigExtractCss]

build/webpack.dev.config.js

@@ -0,0 +1,30 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.config.js')
+
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  mode: 'development',
+  entry: './demo/index.js',
+  output: {
+    path: path.resolve(__dirname, '../demo'),
+    filename: 'build.js'
+  },
+  externals: {
+    'vue': 'Vue'
+  },
+  devServer: {
+    historyApiFallback: {
+      index: './demo/index.html'
+    },
+    noInfo: true,
+    port: 9000
+  },
+  performance: {
+    hints: false
+  },
+  devtool: 'cheap-module-eval-source-map'
+})
+
+module.exports = webpackConfig