Skip to content

Commit 93db85a

Browse files
rigor789NathanWalker
rigor789
authored and
NathanWalker
committed
fix: sass + add copy plugin
1 parent cabf626 commit 93db85a

File tree

4 files changed

+234
-32
lines changed

4 files changed

+234
-32
lines changed

‎packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap‎

Lines changed: 140 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,9 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
123123
{
124124
loader: 'css2json-loader'
125125
},
126-
/* config.module.rule('scss').use('scss-loader') */
126+
/* config.module.rule('scss').use('sass-loader') */
127127
{
128-
loader: 'scss-loader'
128+
loader: 'sass-loader'
129129
}
130130
]
131131
}
@@ -182,8 +182,39 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
182182
'process.env.NODE_ENV': '\\"development\\"'
183183
}
184184
),
185-
/* config.plugin('WatchStateLoggerPlugin') */
186-
new WatchStateLoggerPlugin(),
185+
/* config.plugin('CopyWebpackPlugin') */
186+
new CopyPlugin(
187+
{
188+
patterns: [
189+
{
190+
from: 'assets/**',
191+
context: 'src',
192+
noErrorOnMissing: true,
193+
globOptions: {
194+
dot: false
195+
}
196+
},
197+
{
198+
from: 'fonts/**',
199+
context: 'src',
200+
noErrorOnMissing: true,
201+
globOptions: {
202+
dot: false
203+
}
204+
},
205+
{
206+
from: '**/*.+(jpg|png)',
207+
context: 'src',
208+
noErrorOnMissing: true,
209+
globOptions: {
210+
dot: false
211+
}
212+
}
213+
]
214+
}
215+
),
216+
/* config.plugin('WatchStatePlugin') */
217+
new WatchStatePlugin(),
187218
/* config.plugin('HotModuleReplacementPlugin') */
188219
new HotModuleReplacementPlugin(),
189220
/* config.plugin('ReactRefreshPlugin') */
@@ -317,9 +348,9 @@ exports[`react configuration > android > base config 1`] = `
317348
{
318349
loader: 'css2json-loader'
319350
},
320-
/* config.module.rule('scss').use('scss-loader') */
351+
/* config.module.rule('scss').use('sass-loader') */
321352
{
322-
loader: 'scss-loader'
353+
loader: 'sass-loader'
323354
}
324355
]
325356
}
@@ -376,8 +407,39 @@ exports[`react configuration > android > base config 1`] = `
376407
'process.env.NODE_ENV': '\\"development\\"'
377408
}
378409
),
379-
/* config.plugin('WatchStateLoggerPlugin') */
380-
new WatchStateLoggerPlugin()
410+
/* config.plugin('CopyWebpackPlugin') */
411+
new CopyPlugin(
412+
{
413+
patterns: [
414+
{
415+
from: 'assets/**',
416+
context: 'src',
417+
noErrorOnMissing: true,
418+
globOptions: {
419+
dot: false
420+
}
421+
},
422+
{
423+
from: 'fonts/**',
424+
context: 'src',
425+
noErrorOnMissing: true,
426+
globOptions: {
427+
dot: false
428+
}
429+
},
430+
{
431+
from: '**/*.+(jpg|png)',
432+
context: 'src',
433+
noErrorOnMissing: true,
434+
globOptions: {
435+
dot: false
436+
}
437+
}
438+
]
439+
}
440+
),
441+
/* config.plugin('WatchStatePlugin') */
442+
new WatchStatePlugin()
381443
],
382444
entry: {
383445
bundle: [
@@ -511,9 +573,9 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
511573
{
512574
loader: 'css2json-loader'
513575
},
514-
/* config.module.rule('scss').use('scss-loader') */
576+
/* config.module.rule('scss').use('sass-loader') */
515577
{
516-
loader: 'scss-loader'
578+
loader: 'sass-loader'
517579
}
518580
]
519581
}
@@ -570,8 +632,39 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
570632
'process.env.NODE_ENV': '\\"development\\"'
571633
}
572634
),
573-
/* config.plugin('WatchStateLoggerPlugin') */
574-
new WatchStateLoggerPlugin(),
635+
/* config.plugin('CopyWebpackPlugin') */
636+
new CopyPlugin(
637+
{
638+
patterns: [
639+
{
640+
from: 'assets/**',
641+
context: 'src',
642+
noErrorOnMissing: true,
643+
globOptions: {
644+
dot: false
645+
}
646+
},
647+
{
648+
from: 'fonts/**',
649+
context: 'src',
650+
noErrorOnMissing: true,
651+
globOptions: {
652+
dot: false
653+
}
654+
},
655+
{
656+
from: '**/*.+(jpg|png)',
657+
context: 'src',
658+
noErrorOnMissing: true,
659+
globOptions: {
660+
dot: false
661+
}
662+
}
663+
]
664+
}
665+
),
666+
/* config.plugin('WatchStatePlugin') */
667+
new WatchStatePlugin(),
575668
/* config.plugin('HotModuleReplacementPlugin') */
576669
new HotModuleReplacementPlugin(),
577670
/* config.plugin('ReactRefreshPlugin') */
@@ -708,9 +801,9 @@ exports[`react configuration > ios > base config 1`] = `
708801
{
709802
loader: 'css2json-loader'
710803
},
711-
/* config.module.rule('scss').use('scss-loader') */
804+
/* config.module.rule('scss').use('sass-loader') */
712805
{
713-
loader: 'scss-loader'
806+
loader: 'sass-loader'
714807
}
715808
]
716809
}
@@ -767,8 +860,39 @@ exports[`react configuration > ios > base config 1`] = `
767860
'process.env.NODE_ENV': '\\"development\\"'
768861
}
769862
),
770-
/* config.plugin('WatchStateLoggerPlugin') */
771-
new WatchStateLoggerPlugin()
863+
/* config.plugin('CopyWebpackPlugin') */
864+
new CopyPlugin(
865+
{
866+
patterns: [
867+
{
868+
from: 'assets/**',
869+
context: 'src',
870+
noErrorOnMissing: true,
871+
globOptions: {
872+
dot: false
873+
}
874+
},
875+
{
876+
from: 'fonts/**',
877+
context: 'src',
878+
noErrorOnMissing: true,
879+
globOptions: {
880+
dot: false
881+
}
882+
},
883+
{
884+
from: '**/*.+(jpg|png)',
885+
context: 'src',
886+
noErrorOnMissing: true,
887+
globOptions: {
888+
dot: false
889+
}
890+
}
891+
]
892+
}
893+
),
894+
/* config.plugin('WatchStatePlugin') */
895+
new WatchStatePlugin()
772896
],
773897
entry: {
774898
bundle: [

‎packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap‎

Lines changed: 70 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,9 @@ exports[`vue configuration for android 1`] = `
114114
{
115115
loader: 'css2json-loader'
116116
},
117-
/* config.module.rule('scss').use('scss-loader') */
117+
/* config.module.rule('scss').use('sass-loader') */
118118
{
119-
loader: 'scss-loader'
119+
loader: 'sass-loader'
120120
}
121121
]
122122
},
@@ -191,8 +191,39 @@ exports[`vue configuration for android 1`] = `
191191
process: 'global.process'
192192
}
193193
),
194-
/* config.plugin('WatchStateLoggerPlugin') */
195-
new WatchStateLoggerPlugin()
194+
/* config.plugin('CopyWebpackPlugin') */
195+
new CopyPlugin(
196+
{
197+
patterns: [
198+
{
199+
from: 'assets/**',
200+
context: 'src',
201+
noErrorOnMissing: true,
202+
globOptions: {
203+
dot: false
204+
}
205+
},
206+
{
207+
from: 'fonts/**',
208+
context: 'src',
209+
noErrorOnMissing: true,
210+
globOptions: {
211+
dot: false
212+
}
213+
},
214+
{
215+
from: '**/*.+(jpg|png)',
216+
context: 'src',
217+
noErrorOnMissing: true,
218+
globOptions: {
219+
dot: false
220+
}
221+
}
222+
]
223+
}
224+
),
225+
/* config.plugin('WatchStatePlugin') */
226+
new WatchStatePlugin()
196227
],
197228
entry: {
198229
bundle: [
@@ -317,9 +348,9 @@ exports[`vue configuration for ios 1`] = `
317348
{
318349
loader: 'css2json-loader'
319350
},
320-
/* config.module.rule('scss').use('scss-loader') */
351+
/* config.module.rule('scss').use('sass-loader') */
321352
{
322-
loader: 'scss-loader'
353+
loader: 'sass-loader'
323354
}
324355
]
325356
},
@@ -394,8 +425,39 @@ exports[`vue configuration for ios 1`] = `
394425
process: 'global.process'
395426
}
396427
),
397-
/* config.plugin('WatchStateLoggerPlugin') */
398-
new WatchStateLoggerPlugin()
428+
/* config.plugin('CopyWebpackPlugin') */
429+
new CopyPlugin(
430+
{
431+
patterns: [
432+
{
433+
from: 'assets/**',
434+
context: 'src',
435+
noErrorOnMissing: true,
436+
globOptions: {
437+
dot: false
438+
}
439+
},
440+
{
441+
from: 'fonts/**',
442+
context: 'src',
443+
noErrorOnMissing: true,
444+
globOptions: {
445+
dot: false
446+
}
447+
},
448+
{
449+
from: '**/*.+(jpg|png)',
450+
context: 'src',
451+
noErrorOnMissing: true,
452+
globOptions: {
453+
dot: false
454+
}
455+
}
456+
]
457+
}
458+
),
459+
/* config.plugin('WatchStatePlugin') */
460+
new WatchStatePlugin()
399461
],
400462
entry: {
401463
bundle: [

‎packages/webpack5/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"babel-loader": "^8.2.1",
1919
"clean-webpack-plugin": "^3.0.0",
2020
"cli-highlight": "^2.1.8",
21+
"copy-webpack-plugin": "^6.3.2",
2122
"css": "^3.0.0",
2223
"css-loader": "^5.0.1",
2324
"loader-utils": "^2.0.0",

‎packages/webpack5/src/configuration/base.ts‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,25 @@ import {
44
getAbsoluteDistPath,
55
getEntryPath,
66
getPlatform,
7+
getProjectRootPath,
78
} from '../helpers/project';
89

9-
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
1010
import { DefinePlugin, HotModuleReplacementPlugin } from 'webpack';
11+
12+
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
13+
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
14+
import CopyWebpackPlugin from 'copy-webpack-plugin';
15+
import TerserPlugin from 'terser-webpack-plugin';
16+
1117
// import { WatchStateLoggerPlugin } from '../plugins/WatchStateLoggerPlugin';
1218
import { WatchStatePlugin } from '../plugins/WatchStatePlugin';
13-
import TerserPlugin from 'terser-webpack-plugin';
14-
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
19+
import path from 'path';
1520

1621
export default function (config: Config, env: IWebpackEnv): Config {
1722
const entryPath = getEntryPath();
1823
const platform = getPlatform();
1924
const mode = env.production ? 'production' : 'development';
25+
const appPath = path.dirname(entryPath);
2026

2127
// set mode
2228
config.mode(mode);
@@ -196,11 +202,20 @@ export default function (config: Config, env: IWebpackEnv): Config {
196202
// todo: we should probably move away from CopyWebpackPlugin
197203
// it has many issues we can solve by simply copying files **before** the build even starts
198204
// this is just a temp inline plugin that does nothing while building out the configs.
199-
// config.plugin('CopyWebpackPlugin').use(function CopyPluginTemp() {}, [
200-
// {
201-
// patterns: [],
202-
// },
203-
// ]);
205+
const copyPaths = ['assets/**', 'fonts/**', '**/*.+(jpg|png)'];
206+
config.plugin('CopyWebpackPlugin').use(CopyWebpackPlugin, [
207+
{
208+
patterns: copyPaths.map((from) => ({
209+
from,
210+
context: appPath,
211+
noErrorOnMissing: true,
212+
globOptions: {
213+
dot: false,
214+
// ignore: [``]
215+
},
216+
})),
217+
},
218+
]);
204219

205220
// add the WatchStateLogger plugin used to notify the CLI of build state
206221
// config.plugin('WatchStateLoggerPlugin').use(WatchStateLoggerPlugin);

0 commit comments

Comments
 (0)