質問編集履歴

1

webpack.dev.config.jsの追記

2018/03/13 16:11

投稿

syoyu
syoyu

スコア13

test CHANGED
File without changes
test CHANGED
@@ -406,78 +406,284 @@
406
406
 
407
407
 
408
408
 
409
+ webpack.dev.config.js
410
+
411
+ ```js
412
+
413
+ try {
414
+
415
+ var path = require('path');
416
+
417
+ var os = require('os');
418
+
419
+ var cordovaNodeModules = path.join(os.homedir(), '.cordova', 'node_modules');
420
+
421
+
422
+
423
+ var webpack = require(path.join(cordovaNodeModules, 'webpack'));
424
+
425
+ var HtmlWebpackPlugin = require(path.join(cordovaNodeModules, 'html-webpack-plugin'));
426
+
427
+ var ExtractTextPlugin = require(path.join(cordovaNodeModules, 'extract-text-webpack-plugin'));
428
+
429
+ var ProgressBarPlugin = require(path.join(cordovaNodeModules, 'progress-bar-webpack-plugin'));
430
+
431
+
432
+
433
+ var cssnext = require(path.join(cordovaNodeModules, 'postcss-cssnext'));
434
+
435
+ var postcssImport = require(path.join(cordovaNodeModules, 'postcss-import'));
436
+
437
+ var postcssUrl = require(path.join(cordovaNodeModules, 'postcss-url'));
438
+
439
+
440
+
441
+ } catch (e) {
442
+
443
+ throw new Error('Missing Webpack Build Dependencies.');
444
+
445
+ }
446
+
447
+
448
+
449
+ module.exports = {
450
+
451
+ devtool: 'inline-source-map',
452
+
453
+ context: __dirname,
454
+
455
+ debug: true,
456
+
409
- calendar.vue(自作)
457
+ cache: true,
458
+
459
+
460
+
461
+ entry: [
462
+
463
+ 'webpack/hot/only-dev-server',
464
+
465
+ './src/main'
466
+
467
+ ],
468
+
469
+
470
+
471
+ output: {
472
+
473
+ path: path.join(__dirname, 'www'),
474
+
475
+ filename: 'bundle.js',
476
+
477
+ publicPath:'/'
478
+
479
+ },
480
+
481
+
482
+
483
+ resolve: {
484
+
485
+ root: [
486
+
487
+ path.join(__dirname, 'src'),
488
+
489
+ path.join(__dirname, 'node_modules'),
490
+
491
+ path.resolve(cordovaNodeModules)
492
+
493
+ ],
494
+
495
+
496
+
497
+ extensions: ['', '.js', '.vue', '.json', '.css', '.html', '.styl'],
498
+
499
+
500
+
501
+ unsafeCache: true,
502
+
503
+
504
+
505
+ alias: {
506
+
507
+ vue:'vue/dist/vue.common.js'
508
+
509
+ },
510
+
511
+
512
+
513
+ },
514
+
515
+
516
+
517
+ module: {
518
+
519
+
520
+
521
+
522
+
523
+ loaders: [{
524
+
525
+ test: /.vue$/,
526
+
527
+ loader: 'vue-loader'
528
+
529
+ }, {
530
+
531
+ test: /.js$/,
532
+
533
+ loader: 'babel',
534
+
535
+ exclude: /node_modules/
536
+
537
+ }, {
538
+
539
+ test: /.html$/,
540
+
541
+ loader: 'html'
542
+
543
+ }, {
544
+
545
+ test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(?\S*)?$/,
546
+
547
+ loader: 'file?name=assets/[name].[hash].[ext]'
548
+
549
+ }, {
550
+
551
+ test: /.css$/,
552
+
553
+ include: [
554
+
555
+ path.join(__dirname, 'node_modules', 'onsenui', 'css-components-src', 'src'),
556
+
557
+ path.join(__dirname, 'src')
558
+
559
+ ],
560
+
561
+ loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&-raw!postcss-loader')
562
+
563
+ }, {
564
+
565
+ test: /.css$/,
566
+
567
+ exclude: [
568
+
569
+ path.join(__dirname, 'node_modules', 'onsenui', 'css-components-src', 'src'),
570
+
571
+ path.join(__dirname, 'src')
572
+
573
+ ],
574
+
575
+ loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
576
+
577
+ }, {
578
+
579
+ test: /.json$/,
580
+
581
+ loader: 'json'
582
+
583
+ }]
584
+
585
+ },
586
+
587
+
588
+
589
+ vue: {
590
+
591
+ loaders: {
592
+
593
+ js: 'babel'
594
+
595
+ }
596
+
597
+ },
598
+
599
+
600
+
601
+ babel: {
602
+
603
+ presets: [
604
+
605
+ path.join(cordovaNodeModules, 'babel-preset-es2015')
606
+
607
+ ],
608
+
609
+ },
610
+
611
+
612
+
613
+ postcss: function() {
614
+
615
+ return [
616
+
617
+ postcssImport,
618
+
619
+ postcssUrl,
620
+
621
+ cssnext({
622
+
623
+ browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
624
+
625
+ })
626
+
627
+ ]
628
+
629
+ },
630
+
631
+
632
+
633
+ plugins: [
634
+
635
+ new webpack.HotModuleReplacementPlugin(),
636
+
637
+ new ExtractTextPlugin('[name].css'),
638
+
639
+ new HtmlWebpackPlugin({
640
+
641
+ template: 'src/public/index.html.ejs',
642
+
643
+ chunksSortMode: 'dependency'
644
+
645
+ }),
646
+
647
+ new ProgressBarPlugin()
648
+
649
+ ],
650
+
651
+
652
+
653
+ resolveLoader: {
654
+
655
+ root: [
656
+
657
+ path.join(__dirname, 'node_modules'),
658
+
659
+ cordovaNodeModules
660
+
661
+ ]
662
+
663
+ },
664
+
665
+
666
+
667
+ devServer: {
668
+
669
+ contentBase: './src/public',
670
+
671
+ colors: true,
672
+
673
+ inline: true,
674
+
675
+ historyApiFallback: true,
676
+
677
+ host: '0.0.0.0',
678
+
679
+ stats: 'minimal',
680
+
681
+ hot: true
682
+
683
+ }
684
+
685
+ };
686
+
687
+
410
688
 
411
689
  ```
412
-
413
- <template>
414
-
415
- <full-calendar :events="events"></full-calendar>
416
-
417
- </template>
418
-
419
- <style>
420
-
421
- @import '~fullcalendar/dist/fullcalendar.css';
422
-
423
- </style>
424
-
425
- <script>
426
-
427
- import Vue from 'vue'
428
-
429
- import { FullCalendar } from 'vue-full-calendar'
430
-
431
- export default {
432
-
433
- data() {
434
-
435
- return {
436
-
437
- events: [
438
-
439
- {
440
-
441
- title : 'event1',
442
-
443
- start : '2010-01-01',
444
-
445
- },
446
-
447
- {
448
-
449
- title : 'event2',
450
-
451
- start : '2010-01-05',
452
-
453
- end : '2010-01-07',
454
-
455
- },
456
-
457
- {
458
-
459
- title : 'event3',
460
-
461
- start : '2010-01-09T12:30:00',
462
-
463
- allDay : false,
464
-
465
- },
466
-
467
- ]
468
-
469
- }
470
-
471
- },
472
-
473
- components: {
474
-
475
- FullCalendar,
476
-
477
- },
478
-
479
- }
480
-
481
- </script>
482
-
483
- ```