cakephp-app/webpack.js at master · 3xw/cakephp-app · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
require('dotenv').config()

const
webpack = require('webpack'),
path = require('path'),
webroot = process.env.PUBLIC_PATH

// WebpackPlugins
const
MiniCssExtractPlugin = require("mini-css-extract-plugin"),
TerserPlugin = require('terser-webpack-plugin'),
VueLoaderPlugin = require('vue-loader/lib/plugin'),
{ CleanWebpackPlugin } = require('clean-webpack-plugin')

// settings
const
rules = require('./webpack.rules.js'),
optimization =
{
  minimize: true,
  minimizer: [new TerserPlugin({
    terserOptions: {
      keep_classnames: true,
      keep_fnames: true
    },
  })]
},
plugins = (prefix) => {
  return [
    new webpack.DefinePlugin({
      BASE_URL: JSON.stringify(process.env.BASE_URL)
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        path.join(__dirname,'webroot','js/'+prefix+'/components/*'),
        path.join(__dirname,'webroot','css/'+prefix+'/components/*')
      ],
      cleanStaleWebpackAssets: false
    }),
    new MiniCssExtractPlugin({
      filename: 'css/'+prefix+'/[name].min.css',
      chunkFilename: 'css/'+prefix+'/components/[name].min.css',
    }),
    new VueLoaderPlugin(),
  ]
},
entry = (prefix) =>
{
  // play here with prefix and output...
  let entry =
  {
    main: [
      './resources/assets/'+prefix+'/main.js',
      './resources/assets/'+prefix+'/assets/scss/theme.scss'
    ],
  }

  return entry
},
externals =
[
  {
    vue: 'vue',
    vuex: 'vuex',
    vuexCrud: 'vuex-crud',
    axios: 'axios',
    jquery: 'jquery',
    bootstrap: 'bootstrap',
    select2: 'select2',
    moment: 'moment',
    imagesloaded: 'imagesloaded',
    sortablejs: 'sortablejs',
    modernizr: 'modernizr',
    tiptap: 'tiptap',
    lodash: 'lodash',
    store: 'store',
    d3: 'd3',

  },
  //@codemirror\/[a-z-]i,
]

// configs
const
prefixes = ['front','admin'],
configs = prefixes.map(prefix => {
  return {
    cache: false,
    mode: 'production',
    name: 'app-'+prefix,
    entry: entry(prefix),
    output: {
      path: path.resolve(__dirname, 'webroot'),
      publicPath: webroot,
      filename: 'js/'+prefix+'/[name].min.js',
      chunkFilename: 'js/'+prefix+'/components/[fullhash].[name].min.js',
      libraryTarget: 'umd'
    },
    externals,
    optimization,
    module: {
      rules: [
        rules.babel,
        rules.vue,
        rules.scss
      ]
    },
    plugins: plugins(prefix),
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'resources/assets', prefix),
        '©': path.resolve(__dirname, 'vendor'),
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
  }
})

//console.log(configs)
module.exports = configs