add webpack to vue example

teamnovu · Mar 23, 2020 · 5bbc2e6 · 5bbc2e6
1 parent 405da93
commit 5bbc2e6
Show file tree

Hide file tree

Showing 6 changed files with 243 additions and 26 deletions.
diff --git a/example/vue/index.html b/example/vue/index.html
@@ -0,0 +1,8 @@
+;<html>
+  <head>
+    <title>breaky</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/example/vue/main.js b/example/vue/main.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import '../.vue/assets/css/tailwind-built.css'
+import '../assets/css/tailwind.css'
 import resolveConfig from 'tailwindcss/resolveConfig'
 import Breaky from '../../lib/plugin-vue'
 import twd from '../tailwind.config'

diff --git a/example/vue/postcss.config.js b/example/vue/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+}
diff --git a/example/vue/webpack.config.js b/example/vue/webpack.config.js
@@ -0,0 +1,48 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  entry: './main.js',
+  resolve: {
+    extensions: ['.js', '.json', '.vue'],
+    modules: [
+      'node_modules',
+      '/Users/tom/Projects/nuxt-breaky/node_modules/nuxt-edge/bin/node_modules',
+      '/Users/tom/Projects/nuxt-breaky/node_modules/nuxt-edge/node_modules',
+      '/Users/tom/Projects/nuxt-breaky/node_modules',
+      '/Users/tom/Projects/node_modules',
+      '/Users/tom/node_modules',
+      '/Users/node_modules',
+      '/node_modules',
+    ],
+  },
+  module: {
+    rules: [
+      { test: /\.js$/, use: 'babel-loader' },
+      { test: /\.vue$/, use: 'vue-loader' },
+      {
+        test: /\.(sa|sc|c){1}ss$/i,
+        use: [
+          'style-loader',
+          'vue-style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              config: {
+                path: 'example/vue',
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'example/vue/index.html',
+    }),
+    new VueLoaderPlugin(),
+  ],
+}
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   "scripts": {
     "dev": "yarn dev:nuxt",
     "dev:nuxt": "nuxt example",
-    "dev:vue": "tailwindcss build example/assets/css/tailwind.css -o example/.vue/assets/css/tailwind-built.css -c example/tailwind.config.js && vue-cli-service serve example/vue/main.js",
+    "dev:vue": "webpack-dev-server --mode development --config example/vue/webpack.config.js --port 3000 example/vue/main.js",
     "lint": "eslint --ext .js,.vue example lib test",
     "release": "yarn test && yarn update:gh-pages && standard-version && git push --follow-tags && npm publish",
     "release:patch": "yarn test && yarn update:gh-pages && standard-version --release-as patch && git push --follow-tags && npm publish",
@@ -54,7 +54,9 @@
     "jest": "latest",
     "nuxt-edge": "latest",
     "prettier": "^1.19.1",
-    "standard-version": "latest"
+    "standard-version": "latest",
+    "style-loader": "^1.1.3",
+    "webpack-cli": "^3.3.11"
   },
   "resolutions": {
     "minimist": "^1.2.5"