sunkarapk / vue-builder-webpack-plugin Goto Github PK

Hey there,

it seems for me that there's an endless loop when using the watch option for the build.
I use Laravel Mix with the following webpack.mix.js:

let mix = require('laravel-mix')
let webpack = require('webpack')
let VueBuilder = require('vue-builder-webpack-plugin')

mix.webpackConfig(
    output: {
        chunkFilename: 'js/chunks/[name].js',
    },
    plugins: [
        //...
        new VueBuilder({
            path: 'resources/assets/js/vuejs/',
            folder: true,
        }),
       //...
    ],
    resolve: {
        alias: {
            '~vuejs': path.resolve(__dirname, './resources/assets/js/vuejs'),
            'scss': path.resolve(__dirname, './resources/assets/scss'),
        },
    }
    //...
})
//...
mix.js('resources/assets/js/init.js', 'public/js').extract([/*...*/])
mix.sass('resources/assets/scss/init.scss', 'public/css')

The files itself are created as in the example, so nothing special here. I use the async loading function of vuejs + webpack codesplitting, e.g.:

export default {
    props: [],
    components: {
        'mycomponent': () => import('~vuejs/components/MyConmpoent.vue'),
    },
}

This shouldn't interfere here though.
package.json:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "vue-builder-webpack-plugin": "^0.3.1"
  },
  "dependencies": {
    "clean-webpack-plugin": "^0.1.18",
    "cross-env": "^5.1",
    "laravel-mix": "^1.0",
    "vue": "^2.1.10"
  }
}

Don't get confused because of the scripts here, it's just a default laravel setup ;-)

So all in all the npm run dev works like a charm, all files are created and correctly loaded in the browser. Using the npm run watch though leads to an endless loop:

This then keeps on going until you stop it.

I tried to add the webpack ignore plugin to the build

    new webpack.WatchIgnorePlugin([
        /\.vue/,
    ]),

this didn't help though, the watch keeps on going.

Can you create a new version with last changes? do you need something else before? we want to use in projects without github link.

Hi! Great project!

I'm currently running into an error when trying to use folder mode: I get this message

      var mtime = stats.mtime.getTime();
                              ^

TypeError: stats.mtime.getTime is not a function
    at /home/roni/work/roi-thumbnail/node_modules/cache-loader/dist/index.js:72:31
    at process.nextTick (/home/roni/work/roi-thumbnail/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process.internalTickCallback (internal/process/next_tick.js:70:11)
error Command failed with exit code 1.

I am not sure where this is originating. Any ideas?

compiler.plugin is now unusable: webpack/webpack#11672

hello guy, same title when i write were duplicate file html, how to fix it? Thank you so much

If I have Single Components and multiple files components in the same project, like:

Example.Vue
Example2/
    Example2.js
    Example2.css
    Example2.html

Using this plugin the result will be

Example.Vue
Example2/
    Example2.vue
    Example2.js
    Example2.css
    Example2.html

If I use hot or watch with webpack 4 and I modify Example2.js/css/html everything is ok but if I modify Example.vue the watcher don't compile this file.

If I disable the plugin, the watcher works again.

For example, i have folder named 'MyComponent' inside 'src' folder. In 'MyComponent' folder i have all these required files - MyComponent.vue.js, MyComponent.vue.css, MyComponent.vue.html.
So, is it possible to config this plugin to work with this kind of structure, instead of have too much files from different component inside the 'src' folder?

Folder mode does not seem to be triggered unless, for a folder MyComponent/, three files such as MyComponent.vue.html, MyComponent.vue.js, and MyComponent.vue.css are all present in that directory, even if, for example, the css file is empty.

I think folder mode should be triggered even if one of these files is missing.

Hi again!

I suspect there may be a bug in folder mode. Since the virtual .vue file must be create next to a directory that contains the .vue.html etc. files, I believe the relate() function (here) should take a folder argument which, if true, should put one more dirname into the src attributes of the file sections, so that they say ./App/App.js.vue instead of just ./App.js.vue.

Hi, is it possible to use Typescript with this plugin?

I'm getting

Error: ENOENT: no such file or directory, scandir '/Users/evan/Vue/vue-templates/test/w2/node_modules/vue-builder-webpack-plugin/Users/evan/Vue/vue-templates/test/w2/src'

After passing in an already resolved absolute path to the path option. Looks like the path is being appended after the directory this plugin is in.

• macOS 10.12.1
• Node 6.9.1
• Webpack 2.1.0-beta.11

I've tried several times in two different machines because this has no sense for me, but this is what I'm experimenting.

1.-
npm install vue-builder-webpack-plugin --save installs ^0.4.1 but the index.js file seems not updated.

2.-
Go to https://github.com/pksunkara/vue-builder-webpack-plugin/releases
Go to download zip of 0.4.1 https://github.com/pksunkara/vue-builder-webpack-plugin/archive/v0.4.1.zip
Open files in editor.
package.json

  "name": "vue-builder-webpack-plugin",
  "version": "0.4.1",

but dependencies is not updated.

index.js is not updated, line 9 is stille

const VueBuilderPlugin = (options) => {

Using the webpack vue-cli template
Windows 10
Node 7.2.1

After running npm run dev, I see the message "Building vue files" however the dev server never responds back to the browser when hitting localhost:8080/

What do you think about this feature?

Allow a parameter in options to have all the style files as scoped without need to use the .scoped extension.

What do you think about this feature?

Allow to configure as param, a folder where store all the .vue files (could be useful, to use a .temp folder and ignore it)

I just saw this project link at hacker news and got curious on what this project offer over src imports?

source imports, basically, you to split vue component over different html, css and js files.

Hi,

This is funny because i was doing the same exact thing except from a Loader, configured just before vue-loader.
The problem is vue-template-loader, its not compatible, i wanted a config that support everything, not simple.

Do you have some example of your implementation working? I would like to test it with sass/ts plus mixing normal vue with separated ones. And multiple components too.

Thanks.