diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap index bed62bfba..6edd42dfb 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap @@ -123,9 +123,9 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR { loader: 'css2json-loader' }, - /* config.module.rule('scss').use('scss-loader') */ + /* config.module.rule('scss').use('sass-loader') */ { - loader: 'scss-loader' + loader: 'sass-loader' } ] } @@ -182,8 +182,39 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR 'process.env.NODE_ENV': '\\"development\\"' } ), - /* config.plugin('WatchStateLoggerPlugin') */ - new WatchStateLoggerPlugin(), + /* config.plugin('CopyWebpackPlugin') */ + new CopyPlugin( + { + patterns: [ + { + from: 'assets/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: 'fonts/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: '**/*.+(jpg|png)', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + } + ] + } + ), + /* config.plugin('WatchStatePlugin') */ + new WatchStatePlugin(), /* config.plugin('HotModuleReplacementPlugin') */ new HotModuleReplacementPlugin(), /* config.plugin('ReactRefreshPlugin') */ @@ -317,9 +348,9 @@ exports[`react configuration > android > base config 1`] = ` { loader: 'css2json-loader' }, - /* config.module.rule('scss').use('scss-loader') */ + /* config.module.rule('scss').use('sass-loader') */ { - loader: 'scss-loader' + loader: 'sass-loader' } ] } @@ -376,8 +407,39 @@ exports[`react configuration > android > base config 1`] = ` 'process.env.NODE_ENV': '\\"development\\"' } ), - /* config.plugin('WatchStateLoggerPlugin') */ - new WatchStateLoggerPlugin() + /* config.plugin('CopyWebpackPlugin') */ + new CopyPlugin( + { + patterns: [ + { + from: 'assets/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: 'fonts/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: '**/*.+(jpg|png)', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + } + ] + } + ), + /* config.plugin('WatchStatePlugin') */ + new WatchStatePlugin() ], entry: { bundle: [ @@ -511,9 +573,9 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena { loader: 'css2json-loader' }, - /* config.module.rule('scss').use('scss-loader') */ + /* config.module.rule('scss').use('sass-loader') */ { - loader: 'scss-loader' + loader: 'sass-loader' } ] } @@ -570,8 +632,39 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena 'process.env.NODE_ENV': '\\"development\\"' } ), - /* config.plugin('WatchStateLoggerPlugin') */ - new WatchStateLoggerPlugin(), + /* config.plugin('CopyWebpackPlugin') */ + new CopyPlugin( + { + patterns: [ + { + from: 'assets/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: 'fonts/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: '**/*.+(jpg|png)', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + } + ] + } + ), + /* config.plugin('WatchStatePlugin') */ + new WatchStatePlugin(), /* config.plugin('HotModuleReplacementPlugin') */ new HotModuleReplacementPlugin(), /* config.plugin('ReactRefreshPlugin') */ @@ -708,9 +801,9 @@ exports[`react configuration > ios > base config 1`] = ` { loader: 'css2json-loader' }, - /* config.module.rule('scss').use('scss-loader') */ + /* config.module.rule('scss').use('sass-loader') */ { - loader: 'scss-loader' + loader: 'sass-loader' } ] } @@ -767,8 +860,39 @@ exports[`react configuration > ios > base config 1`] = ` 'process.env.NODE_ENV': '\\"development\\"' } ), - /* config.plugin('WatchStateLoggerPlugin') */ - new WatchStateLoggerPlugin() + /* config.plugin('CopyWebpackPlugin') */ + new CopyPlugin( + { + patterns: [ + { + from: 'assets/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: 'fonts/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: '**/*.+(jpg|png)', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + } + ] + } + ), + /* config.plugin('WatchStatePlugin') */ + new WatchStatePlugin() ], entry: { bundle: [ diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap index c85d74460..382b7f4aa 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap @@ -114,9 +114,9 @@ exports[`vue configuration for android 1`] = ` { loader: 'css2json-loader' }, - /* config.module.rule('scss').use('scss-loader') */ + /* config.module.rule('scss').use('sass-loader') */ { - loader: 'scss-loader' + loader: 'sass-loader' } ] }, @@ -191,8 +191,39 @@ exports[`vue configuration for android 1`] = ` process: 'global.process' } ), - /* config.plugin('WatchStateLoggerPlugin') */ - new WatchStateLoggerPlugin() + /* config.plugin('CopyWebpackPlugin') */ + new CopyPlugin( + { + patterns: [ + { + from: 'assets/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: 'fonts/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: '**/*.+(jpg|png)', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + } + ] + } + ), + /* config.plugin('WatchStatePlugin') */ + new WatchStatePlugin() ], entry: { bundle: [ @@ -317,9 +348,9 @@ exports[`vue configuration for ios 1`] = ` { loader: 'css2json-loader' }, - /* config.module.rule('scss').use('scss-loader') */ + /* config.module.rule('scss').use('sass-loader') */ { - loader: 'scss-loader' + loader: 'sass-loader' } ] }, @@ -394,8 +425,39 @@ exports[`vue configuration for ios 1`] = ` process: 'global.process' } ), - /* config.plugin('WatchStateLoggerPlugin') */ - new WatchStateLoggerPlugin() + /* config.plugin('CopyWebpackPlugin') */ + new CopyPlugin( + { + patterns: [ + { + from: 'assets/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: 'fonts/**', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + }, + { + from: '**/*.+(jpg|png)', + context: 'src', + noErrorOnMissing: true, + globOptions: { + dot: false + } + } + ] + } + ), + /* config.plugin('WatchStatePlugin') */ + new WatchStatePlugin() ], entry: { bundle: [ diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json index 093e57b50..7cc1050ee 100644 --- a/packages/webpack5/package.json +++ b/packages/webpack5/package.json @@ -18,6 +18,7 @@ "babel-loader": "^8.2.1", "clean-webpack-plugin": "^3.0.0", "cli-highlight": "^2.1.8", + "copy-webpack-plugin": "^6.3.2", "css": "^3.0.0", "css-loader": "^5.0.1", "loader-utils": "^2.0.0", diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index 42041bd02..85f4fafa5 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/packages/webpack5/src/configuration/base.ts @@ -4,19 +4,25 @@ import { getAbsoluteDistPath, getEntryPath, getPlatform, + getProjectRootPath, } from '../helpers/project'; -import { CleanWebpackPlugin } from 'clean-webpack-plugin'; import { DefinePlugin, HotModuleReplacementPlugin } from 'webpack'; + +import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; +import { CleanWebpackPlugin } from 'clean-webpack-plugin'; +import CopyWebpackPlugin from 'copy-webpack-plugin'; +import TerserPlugin from 'terser-webpack-plugin'; + // import { WatchStateLoggerPlugin } from '../plugins/WatchStateLoggerPlugin'; import { WatchStatePlugin } from '../plugins/WatchStatePlugin'; -import TerserPlugin from 'terser-webpack-plugin'; -import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; +import path from 'path'; export default function (config: Config, env: IWebpackEnv): Config { const entryPath = getEntryPath(); const platform = getPlatform(); const mode = env.production ? 'production' : 'development'; + const appPath = path.dirname(entryPath); // set mode config.mode(mode); @@ -196,11 +202,20 @@ export default function (config: Config, env: IWebpackEnv): Config { // todo: we should probably move away from CopyWebpackPlugin // it has many issues we can solve by simply copying files **before** the build even starts // this is just a temp inline plugin that does nothing while building out the configs. - // config.plugin('CopyWebpackPlugin').use(function CopyPluginTemp() {}, [ - // { - // patterns: [], - // }, - // ]); + const copyPaths = ['assets/**', 'fonts/**', '**/*.+(jpg|png)']; + config.plugin('CopyWebpackPlugin').use(CopyWebpackPlugin, [ + { + patterns: copyPaths.map((from) => ({ + from, + context: appPath, + noErrorOnMissing: true, + globOptions: { + dot: false, + // ignore: [``] + }, + })), + }, + ]); // add the WatchStateLogger plugin used to notify the CLI of build state // config.plugin('WatchStateLoggerPlugin').use(WatchStateLoggerPlugin);