first app draft

build/utils.js

@@ -0,0 +1,14 @@
+'use strict'
+
+const path = require('path')
+
+module.exports = {
+  resolve: function (dir) {
+    return path.join(__dirname, '..', dir)
+  },
+
+  assetsPath: function (_path) {
+    const assetsSubDirectory = 'static'
+    return path.posix.join(assetsSubDirectory, _path)
+  }
+}

build/webpack.config.base.js

@@ -0,0 +1,82 @@
+'use strict'
+
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
+const { VueLoaderPlugin } = require('vue-loader')
+
+const utils = require('./utils')
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'assets': utils.resolve('assets'),
+      'pages': utils.resolve('src/pages'),
+      'static': utils.resolve('static'),
+      'components': utils.resolve('src/components'),
+      'api': utils.resolve('src/api')
+    }
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        use: 'eslint-loader',
+        enforce: 'pre'
+      }, {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      }, {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+        }
+      }, {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          }
+        }
+      }, {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: utils.assetsPath('media/[name].[hash:7].[ext]')
+          }
+        }
+      }, {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          }
+        }
+      }
+    ]
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+      alwaysWriteToDisk: true
+    }),
+    new HtmlWebpackHarddiskPlugin(),
+    new VueLoaderPlugin(),
+    new CopyWebpackPlugin([{
+      from: utils.resolve('static/img'),
+      to: utils.resolve('dist/static/img'),
+      toType: 'dir'
+    }])
+  ]
+}

build/webpack.config.dev.js

@@ -0,0 +1,63 @@
+'use strict'
+
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+
+const baseConfig = require('./webpack.config.base')
+
+const PORT = 8988
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+
+  output: {
+    publicPath: '/'
+  },
+
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      // rewrites: [
+      //   { from: /.*/, to: '/index.html' },
+      // ],
+      index: '/',
+      disableDotRule: true,
+      verbose: true
+    },
+    // historyApiFallback: true,
+    hot: true,
+    contentBase: 'dist',
+    compress: true,
+    // host: 'dev.gdp.fr',
+    host: '0.0.0.0',
+    port: PORT,
+    disableHostCheck: true,
+    overlay: { warnings: false, errors: true },
+    publicPath: '/',
+    quiet: false,
+    // open: "firefox-developer-edition",
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ]
+      }, {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ]
+})

build/webpack.config.prod.js

@@ -0,0 +1,43 @@
+'use strict'
+
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.config.base')
+const MiniCssExtractPlugin  = require('mini-css-extract-plugin')
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          chunks: "all",
+        },
+      },
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css?$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      }, {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'main.css'
+    })
+  ]
+})