Got it to the point of loading the component without styles

Author: alajfit

package-lock.json

@@ -42,13 +42,15 @@
  "dependencies": {
  "babel-loader": "^7.1.5",
  "css-loader": "^1.0.0",
+ "dotenv-webpack": "^1.5.7",
  "html-webpack-plugin": "^3.2.0",
  "inquirer": "^6.0.0",
  "less-loader": "^4.1.0",
  "sass-loader": "^7.0.3",
  "vue-loader": "^15.2.4",
  "vue-style-loader": "^4.1.0",
  "webpack": "^4.15.1",
+ "webpack-plugin-replace": "^1.1.1",
  "webpack-serve": "^1.0.4"
  }
 }

package.json

@@ -1,20 +1,22 @@
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const path = require('path')
-const entry = require('../entry')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 module.exports = opts => {
+ console.log(opts)
 
  const config = {
  devtool: 'eval-source-map',
+ mode: 'development',
  devServer: {
  contentBase: opts.cwd,
  compress: true,
  open: true,
  port: 9000,
  disableHostCheck: true
  },
- entry: () => new Promise(resolve => resolve(entry(opts.componentName, opts.entry))), // './test/demo/entry.js',
+ entry: path.resolve(__dirname, '../entry/index.js'),
 
  module: {
  rules: [
@@ -43,7 +45,12 @@ module.exports = opts => {
  },
 
  plugins: [
- new HtmlWebpackPlugin()
+ new HtmlWebpackPlugin(),
+ new VueLoaderPlugin(),
+ new webpack.DefinePlugin({
+ COMP: JSON.stringify(opts.componentName),
+ LOCA: JSON.stringify(opts.entry)
+ })
  ]
  }
 

src/engine/webpack.config.js

@@ -1,9 +1,8 @@
-const entry = (componentName, fileImport) =>
- `
- document.querySelector('body').innerHTML = '<div id="app"><${componentName} /></div>'
+document.querySelector('body').innerHTML = `<div id="app"><${COMP} /></div>`
 
- import Test from '${fileImport}'
- import Vue from 'vue/dist/vue.js'
- `
+const Component = require(LOCA)
+const Vue = require('vue/dist/vue.js')
 
-module.exports = entry
+Vue.component(Component.default.name, Component.default)
+
+new Vue({ el: '#app' })

src/entry/index.js

@@ -1,6 +1,6 @@
 <template>
- <div>
- <h2>A Simple Component</h2>
+ <div class="sc__container">
+ <h2 class="sc__container-title">A Simple Component</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in magna urna. Ut id dolor non eros vestibulum rutrum eget eu purus. Vestibulum et eros massa. In hendrerit sem vel quam blandit aliquam. Nunc mauris leo, sagittis at enim in, dictum ultrices elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin rutrum nisi in tellus semper sagittis vel ac nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras ullamcorper neque vel leo venenatis vestibulum.</p>
  <p>Nunc tristique, purus in accumsan feugiat, neque sapien varius odio, non porta sapien orci sed nunc. Donec sed magna lorem. Aliquam volutpat massa quam, porttitor ornare dui iaculis et. Curabitur fermentum, dolor eu laoreet volutpat, velit nulla hendrerit dui, sed consectetur magna dui eget libero. Nulla ut egestas sapien. Duis pellentesque neque vitae ornare dignissim. Curabitur viverra velit a sem scelerisque, vitae mattis risus egestas. Integer vehicula vulputate est, at scelerisque lorem laoreet et. Pellentesque mattis tellus ex. Donec efficitur risus eu tellus pellentesque malesuada. Pellentesque finibus diam vel iaculis fringilla. Curabitur porttitor metus non quam mollis, non semper elit vulputate. Phasellus id sem tempor, lobortis est sed, elementum tortor. Nunc commodo magna at orci fringilla porttitor.</p>
  <p>Sed quis dapibus lorem. Praesent hendrerit imperdiet molestie. Sed eu metus vel tellus varius lobortis sed id leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec gravida nulla at justo ultricies interdum. In eu aliquam tortor. Morbi a nibh id nisl laoreet luctus.</p>
@@ -13,5 +13,4 @@
  export default {
  name: 'simple-component'
  }
-</script>
-
+</script>