webpack.mix.js
3.45 KB
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
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your application. See https://github.com/JeffreyWay/laravel-mix.
|
*/
const proxy = require('./config/proxy.js');
const mix = require('laravel-mix');
const glob = require('glob');
const path = require('path');
require('laravel-mix-stylelint');
require('laravel-mix-copy-watched');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
/*
|--------------------------------------------------------------------------
| Configuration
|--------------------------------------------------------------------------
*/
mix
.sourceMaps()
.webpackConfig({
// Use the jQuery shipped with Drupal to avoid conflicts.
externals: {
jquery: "jQuery",
},
devtool: 'source-map',
resolve: {
alias: {
'@droopler_theme_scss': path.resolve('../../../profiles/contrib/droopler/themes/custom/droopler_theme/src/scss'),
},
},
})
.setPublicPath("build")
.disableNotifications()
.options({
processCssUrls: false,
})
.webpackConfig({
plugins: [new CleanWebpackPlugin()],
});
/*
|--------------------------------------------------------------------------
| Browsersync
|--------------------------------------------------------------------------
*/
mix.browserSync({
proxy: proxy.proxy,
files: [
'build/js/**/*.js',
'build/css/**/*.css',
'build/components/**/*.css',
'build/components/**/*.js',
'src/**/*.twig',
'templates/**/*.twig',
],
stream: true,
});
/*
|--------------------------------------------------------------------------
| SASS
|--------------------------------------------------------------------------
*/
mix.sass('src/scss/main.style.scss', 'css');
mix.sass('src/scss/overrides.style.scss', 'css');
glob.sync('src/components/**/*.scss').forEach((sourcePath) => {
const destinationPath = sourcePath.replace(
/^src\/(components\/.+)\/_?(.+)\.scss$/,
'$1/$2.css'
);
mix.sass(sourcePath, destinationPath);
});
/*
|--------------------------------------------------------------------------
| JS
|--------------------------------------------------------------------------
*/
mix.js('src/js/main.script.js', 'js');
glob.sync('src/components/**/*.js').forEach((sourcePath) => {
const destinationPath = sourcePath.replace(
/^src\/(components\/.+)\/(.+)\.js$/,
'$1/$2.js'
);
mix.js(sourcePath, destinationPath);
});
/*
|--------------------------------------------------------------------------
| Style Lint
|--------------------------------------------------------------------------
*/
mix.stylelint({
configFile: './.stylelintrc.json',
context: './src',
failOnError: false,
files: ['**/*.scss'],
quiet: false,
customSyntax: 'postcss-scss',
});
/*
|--------------------------------------------------------------------------
* IMAGES / ICONS / VIDEOS / FONTS
|--------------------------------------------------------------------------
*/
// * Directly copies the images, icons and fonts with no optimizations on the
// images
mix.copyDirectoryWatched('src/assets/images', 'build/assets/images');
mix.copyDirectoryWatched('src/assets/icons', 'build/assets/icons');
mix.copyDirectoryWatched('src/assets/videos', 'build/assets/videos');
mix.copyDirectoryWatched('src/assets/fonts/**/*', 'build/fonts');