11const webpack = require ( 'webpack' ) ;
22const path = require ( 'path' ) ;
33const glob = require ( 'glob' ) ;
4- const ExtractTextPlugin = require ( 'extract-text-webpack- plugin' ) ;
4+ const VueLoaderPlugin = require ( 'vue-loader/lib/ plugin' ) ;
55const CleanWebpackPlugin = require ( 'clean-webpack-plugin' ) ;
6+ const MiniCssExtractPlugin = require ( 'mini-css-extract-plugin' ) ;
7+ const PurgecssPlugin = require ( 'purgecss-webpack-plugin' ) ;
68const ManifestPlugin = require ( 'webpack-manifest-plugin' ) ;
79const BrowserSyncPlugin = require ( 'browser-sync-webpack-plugin' ) ;
810const config = require ( './config' ) ;
@@ -11,6 +13,19 @@ const inProduction = process.env.NODE_ENV === 'production';
1113const styleHash = inProduction ? 'contenthash' : 'hash' ;
1214const scriptHash = inProduction ? 'chunkhash' : 'hash' ;
1315
16+ // LOADER HELPERS
17+ const extractCss = {
18+ loader : MiniCssExtractPlugin . loader ,
19+ options : {
20+ publicPath : `${ config . assetsPath } ,
21+ } ,
22+ } ;
23+
24+ const cssLoader = {
25+ loader : 'css-loader' ,
26+ options : { minimize : inProduction } ,
27+ } ;
28+
1429module . exports = {
1530 entry : {
1631 app : glob . sync ( './resources/assets/+(s[ac]ss|js)/main.+(s[ac]ss|js)' ) ,
@@ -28,41 +43,49 @@ module.exports = {
2843 {
2944 test : / \. v u e $ / ,
3045 loader : 'vue-loader' ,
31- options : {
32- loaders : {
33- // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
34- // the "scss" and "sass" values for the lang attribute to the right configs here.
35- // other preprocessors should work out of the box, no loader config like this necessary.
36- scss : [ 'vue-style-loader' , 'css-loader' , 'sass-loader' ] ,
37- sass : [
38- 'vue-style-loader' ,
39- 'css-loader' ,
40- 'sass-loader?indentedSyntax' ,
41- ] ,
42- } ,
43- // other vue-loader options go here
44- } ,
4546 } ,
4647 {
47- test : / \. s [ a c ] s s $ / ,
48- use : ExtractTextPlugin . extract ( {
49- fallback : 'style-loader' ,
50- use : [
51- {
52- loader : 'css-loader' ,
53- options : { minimize : inProduction } ,
54- } ,
55- {
56- loader : 'sass-loader' ,
57- options : { sourceMap : true } ,
48+ test : / \. j s $ / ,
49+ loader : 'babel-loader' ,
50+ } ,
51+ {
52+ test : / \. c s s $ / ,
53+ use : [ 'vue-style-loader' , extractCss , cssLoader ] ,
54+ } ,
55+ {
56+ test : / \. s c s s $ / ,
57+ use : [
58+ 'vue-style-loader' ,
59+ extractCss ,
60+ cssLoader ,
61+ {
62+ loader : 'sass-loader' ,
63+ options : {
64+ includePaths : [
65+ path . resolve ( __dirname , '../resources/assets/sass' ) ,
66+ ] ,
67+ data : '@import "variables";' ,
5868 } ,
59- ] ,
60- } ) ,
69+ } ,
70+ ] ,
6171 } ,
6272 {
63- test : / \. j s $ / ,
64- exclude : / n o d e _ m o d u l e s / ,
65- loader : 'babel-loader' ,
73+ test : / \. s a s s $ / ,
74+ use : [
75+ 'vue-style-loader' ,
76+ extractCss ,
77+ cssLoader ,
78+ {
79+ loader : 'sass-loader' ,
80+ options : {
81+ indentedSyntax : true ,
82+ includePaths : [
83+ path . resolve ( __dirname , '../resources/assets/sass' ) ,
84+ ] ,
85+ data : '@import "variables";' ,
86+ } ,
87+ } ,
88+ ] ,
6689 } ,
6790 {
6891 test : / \. ( p n g | j p e ? g | g i f | s v g ) $ / ,
@@ -91,6 +114,19 @@ module.exports = {
91114 ] ,
92115 } ,
93116
117+ optimization : {
118+ splitChunks : {
119+ cacheGroups : {
120+ vendor : {
121+ chunks : 'all' ,
122+ name : 'vendor' ,
123+ test : 'vendor' ,
124+ enforce : true ,
125+ } ,
126+ } ,
127+ } ,
128+ } ,
129+
94130 resolve : {
95131 alias : {
96132 vue$ : 'vue/dist/vue.esm.js' ,
@@ -100,34 +136,30 @@ module.exports = {
100136 } ,
101137
102138 plugins : [
103- new ExtractTextPlugin ( `css/[name].[${ styleHash } ) ,
104-
105- new BrowserSyncPlugin ( {
106- host : 'localhost' ,
107- port : 3000 ,
108- proxy : config . devUrl , // YOUR DEV-SERVER URL
109- files : [ './*.php' , './resources/views/**/*.twig' , './static/*.*' ] ,
110- } ) ,
139+ new VueLoaderPlugin ( ) ,
111140
112141 new CleanWebpackPlugin ( [ 'static/css/*' , 'static/js/*' ] , {
142+ root : path . join ( __dirname , '../' ) ,
113143 watch : true ,
114- root : path . resolve ( __dirname , '../' ) ,
144+ } ) ,
145+
146+ new MiniCssExtractPlugin ( {
147+ filename : `css/[name].[${ styleHash } ,
148+ } ) ,
149+
150+ new PurgecssPlugin ( {
151+ paths : ( ) =>
152+ glob . sync ( path . join ( __dirname , '../resources/**/*' ) , { nodir : true } ) ,
153+ only : [ 'app' ] ,
115154 } ) ,
116155
117156 new ManifestPlugin ( ) ,
118- new webpack . optimize . CommonsChunkPlugin ( {
119- name : 'vendor' ,
120- filename : `js/[name].[${ scriptHash } ,
157+
158+ new BrowserSyncPlugin ( {
159+ host : 'localhost' ,
160+ port : 3000 ,
161+ proxy : config . devUrl , // YOUR DEV-SERVER URL
162+ files : [ './*.php' , './resources/views/**/*.twig' , './static/*.*' ] ,
121163 } ) ,
122164 ] ,
123165} ;
124-
125- if ( inProduction ) {
126- module . exports . plugins . push ( new webpack . optimize . UglifyJsPlugin ( ) ) ;
127-
128- module . exports . plugins . push ( new webpack . DefinePlugin ( {
129- 'process.env' : {
130- NODE_ENV : '"production"' ,
131- } ,
132- } ) ) ;
133- }
0 commit comments