StoryConsoleEditor/webpack.config.js at main · jack850628/StoryConsoleEditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
    mode: 'production',//'development',
    entry: {
      editor: './src/js/editor.js',
      index: './src/js/index.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist'),
        libraryTarget: 'var',
        library: "SCEditor",
    },
    module: {
        rules: [
          {
            test: /\.vue$/i,
            loader: 'vue-loader',
          },
          // this will apply to both plain `.js` files
          // AND `<script>` blocks in `.vue` files
          {
            test: /\.js$/i,
            use: {
                loader: 'babel-loader',
                options: {
                    // presets: ['@babel/preset-react','@babel/preset-env'],
                    plugins: ['@babel/plugin-proposal-class-properties'],
                }
            }
          },
          // this will apply to both plain `.css` files
          // AND `<style>` blocks in `.vue` files
          {
            test: /\.css$/i,
            use: [
              'vue-style-loader',
              'style-loader',
              'css-loader',
            ]//use中所使用的loader的解析順序是由下至上(或由右至左)的
          },
          {
            test: /\.(png|jpg|gif|svg)$/i,
            loader: 'file-loader',
            options: {
              name: '[name].[ext]?[hash]'
            }
          },
          {
            test: /\.s(c|a)ss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                // Requires sass-loader@^7.0.0
                options: {
                  implementation: require('sass'),
                  indentedSyntax: true // optional
                },
                // Requires sass-loader@^8.0.0
                options: {
                  implementation: require('sass'),
                  sassOptions: {
                    indentedSyntax: true // optional
                  },
                },
              },
            ],
          },
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js',//少了這個，在網頁執行時，Vue就不會運作
          '@': resolve('src'),
        }
      }
};