lavas-project / vue-skeleton-webpack-plugin

Lavas webpack plugin: skeleton solution for PWA webshell
886 stars 129 forks source link

能否为vue-cli3、webpack4写个适配的demo? #67

Open bi-kai opened 5 years ago

bi-kai commented 5 years ago

目前实践不是很明白。 能否为vue-cli3、webpack4写个适配的demo?

negativeentropy9 commented 5 years ago

examples/webpack4 和 examples/vue-cli3 都可以跑通吧,能否给个报错提示或者实践不清楚的地方,目前该插件不支持 html-webpack-plugin 4.x。

zhoufanglu commented 5 years ago

examples/webpack4 和 examples/vue-cli3 都可以跑通吧,能否给个报错提示或者实践不清楚的地方,目前该插件不支持 html-webpack-plugin 4.x。

请问 你cli3 多骨架的实现了吗?

negativeentropy9 commented 5 years ago

examples/webpack4 和 examples/vue-cli3 都可以跑通吧,能否给个报错提示或者实践不清楚的地方,目前该插件不支持 html-webpack-plugin 4.x。

请问 你cli3 多骨架的实现了吗?

说的是多入口骨架吗?

zhoufanglu commented 5 years ago

examples/webpack4 和 examples/vue-cli3 都可以跑通吧,能否给个报错提示或者实践不清楚的地方,目前该插件不支持 html-webpack-plugin 4.x。

请问 你cli3 多骨架的实现了吗?

说的是多入口骨架吗?

是的,我已经解决了。

ReinhardChen93 commented 5 years ago

examples/webpack4 和 examples/vue-cli3 都可以跑通吧,能否给个报错提示或者实践不清楚的地方,目前该插件不支持 html-webpack-plugin 4.x。

请问 你cli3 多骨架的实现了吗?

说的是多入口骨架吗?

是的,我已经解决了。

请问cli3怎么 解决多入口 骨架屏

zhoufanglu commented 5 years ago

examples/webpack4 和 examples/vue-cli3 都可以跑通吧,能否给个报错提示或者实践不清楚的地方,目前该插件不支持 html-webpack-plugin 4.x。

请问 你cli3 多骨架的实现了吗?

说的是多入口骨架吗?

是的,我已经解决了。

请问cli3怎么 解决多入口 骨架屏

点这里 你可以看看这个,如果有帮助,点个赞。

ReinhardChen93 commented 5 years ago

@zhoufanglu 您好,我和您配置的 是一样的,可是没有出来 `const webpack = require('webpack') const path = require('path') const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = { devServer: { host: '0.0.0.0', port: 8080 }, configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'windows.jQuery': 'jquery' }), new SkeletonWebpackPlugin({ webpackConfig: { entry: { app: path.join(__dirname, './src/plugins/entry-skeleton.js') } }, minimize: true, quiet: true, router: { mode: 'history', routes: [ { path: '/Order_home', skeletonId: 'skeleton2' }, { path: '/', skeletonId: 'skeleton1' } ] } }) ] }, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // 启用 CSS modules for all css / pre-processor files. modules: false } } `

zhoufanglu commented 5 years ago
configureWebpack: (config) => {
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton/entry-skeleton.js'),
        }
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'hash',
        routes: [
          {
            path: '/home',
            skeletonId: 'skeleton1'
          },
          {
            path: '/login',
            skeletonId: 'loginSkeleton'
          },
          {
            path: '/test',
            skeletonId: 'skeleton2'
          }
        ]
      }
    }))

    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production';
    } else {
      // 为开发环境修改配置...
      config.mode = 'development';
    }

    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components')
        }
      }
    });
  },

这是我的,我看还是有点区别的,我这个是vue-cli3

ReinhardChen93 commented 5 years ago
configureWebpack: (config) => {
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton/entry-skeleton.js'),
        }
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'hash',
        routes: [
          {
            path: '/home',
            skeletonId: 'skeleton1'
          },
          {
            path: '/login',
            skeletonId: 'loginSkeleton'
          },
          {
            path: '/test',
            skeletonId: 'skeleton2'
          }
        ]
      }
    }))

    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production';
    } else {
      // 为开发环境修改配置...
      config.mode = 'development';
    }

    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components')
        }
      }
    });
  },

这是我的,我看还是有点区别的,我这个是vue-cli3

好的,谢谢

ReinhardChen93 commented 5 years ago
configureWebpack: (config) => {
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton/entry-skeleton.js'),
        }
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'hash',
        routes: [
          {
            path: '/home',
            skeletonId: 'skeleton1'
          },
          {
            path: '/login',
            skeletonId: 'loginSkeleton'
          },
          {
            path: '/test',
            skeletonId: 'skeleton2'
          }
        ]
      }
    }))

    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production';
    } else {
      // 为开发环境修改配置...
      config.mode = 'development';
    }

    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components')
        }
      }
    });
  },

这是我的,我看还是有点区别的,我这个是vue-cli3

好的,谢谢