I have the following config for hot reloading:
dev.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
package.json
{
"name": "Brian",
"version": "0.5.0",
"description": "A hard&ruthless data reporter",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"start": "node bin/server.js",
"test": "karma start"
},
"keywords": [
"react",
"reactjs",
"babel6",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"license": "MIT",
"authors": [],
"contributors": [],
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.8.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2017": "^1.4.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"bootstrap-loader": "^1.0.10",
"bootstrap-sass": "^3.3.6",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.19.0",
"exports-loader": "^0.6.3",
"express": "^4.13.4",
"express-open-in-editor": "^1.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"imports-loader": "^0.6.5",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-mocha": "^1.0.1",
"karma-webpack": "^1.7.0",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"mocha": "^2.2.5",
"morgan": "^1.7.0",
"node-sass": "^3.7.0",
"postcss-import": "^8.1.1",
"postcss-loader": "^0.9.1",
"react-hot-loader": "^1.3.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0",
"webpack-merge": "^0.12.0"
},
"dependencies": {
"chart.js": "^1.1.1",
"classnames": "^2.2.5",
"flag-icon-css": "^1.3.0",
"griddle-react": "^0.5.0",
"isomorphic-fetch": "^2.2.1",
"moment": "^2.13.0",
"moment-timezone": "^0.5.4",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-bootstrap-daterangepicker": "^3.0.0",
"react-chartjs": "jhudson8/react-chartjs",
"react-document-meta": "^2.0.3",
"react-dom": "^15.4.1",
"react-intl-redux": "0.0.7",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-bootstrap": "^0.23.0",
"react-router-redux": "^4.0.4",
"react-s3-uploader": "^3.0.3",
"react-select": "1.0.0-beta13",
"react-transform-hmr": "^1.0.4",
"redux": "^3.5.2",
"redux-form": "^5.2.3",
"redux-logger": "2.6.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"underscore": "^1.8.3"
}
}
bin/server.js
var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config;
try {
config = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
require('babel-core/register')(config);
require('../server');
server.js
const http = require('http');
const express = require('express');
const app = express();
app.use(require('morgan')('short'));
(function initWebpack() {
const webpack = require('webpack');
const webpackConfig = require('./webpack/common.config');
const compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(compiler, {
log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
}));
app.use(express.static(__dirname + '/'));
})();
app.get(/.*/, function root(req, res) {
res.sendFile(__dirname + '/index.html');
});
const server = http.createServer(app);
server.listen(process.env.PORT || 3000, function onListen() {
const address = server.address();
console.log('Listening on: %j', address);
console.log(' -> that probably means: http://localhost:%d', address.port);
});
Does anyone can see anything?
Related
While trying to start the project I have the following error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'C:\Users\user\Documents\signatura-web\node_modules#babel\preset-es2015' imported from C:\Users\user\Documents\signatura-web\babel-virtual-resolve-base.js.
I have #babel packages installed (7th version) and babel-loader (8th version).
Here is package.json file:
{
"name": "signatura-web",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development --env dev",
"build": "webpack --mode production --env stage",
"build:prod": "webpack --mode production --env prod",
"serve": "node prodServer.js",
"test": "jest"
},
"repository": {
"type": "git",
"url": "https://Evgeny.Smirennikov#bitbucket.axamit.com/scm/sgt/signatura-web.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-transform-runtime": "^7.11.5",
"#babel/preset-env": "^7.10.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.10.1",
"#babel/preset-typescript": "^7.12.7",
"#svgr/webpack": "^5.4.0",
"#types/react-datepicker": "^4.3.3",
"#types/react-notifications-component": "^2.4.0",
"#types/react-redux": "^7.1.11",
"#types/react-router-dom": "^5.3.2",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "^5.12.1",
"#typescript-eslint/parser": "^5.12.1",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^6.4.0",
"css-loader": "^3.6.0",
"eslint": "^8.21.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^6.0.4",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"identity-obj-proxy": "^3.0.0",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^2.7.1",
"react-datetime": "2.16.3",
"react-router-redux": "^4.0.8",
"style-loader": "^1.2.1",
"stylus-loader": "^3.0.2",
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#beyonk/google-fonts-webpack-plugin": "^1.5.0",
"#hookform/resolvers": "^1.0.0",
"#logtail/browser": "^0.1.12",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#types/react-input-mask": "^3.0.1",
"animejs": "^3.2.1",
"axios": "^0.27.2",
"bootstrap": "^4.5.2",
"braintree-web-drop-in-react": "^1.2.1",
"classnames": "^2.2.6",
"compute-scroll-into-view": "^1.0.17",
"connected-react-router": "^6.8.0",
"copy-to-clipboard": "^3.3.1",
"date-fns": "^2.29.1",
"express": "^4.17.1",
"file-loader": "^6.1.0",
"font-awesome": "^4.7.0",
"google-map-react": "^2.1.9",
"headroom.js": "^0.11.0",
"html-react-parser": "^1.4.8",
"jest": "^26.6.3",
"moment": "^2.26.0",
"node-sass": "^4.14.1",
"openvidu-browser": "2.16.0",
"pdfjs-dist": "^3.0.279",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-addons-css-transition-group": "^15.6.2",
"react-bootstrap": "^1.3.0",
"react-bootstrap-typeahead": "^5.1.1",
"react-datepicker": "^4.5.0",
"react-document-meta": "^3.0.0-beta.2",
"react-dom": "^16.13.1",
"react-dropzone": "^11.1.0",
"react-ga": "^3.3.0",
"react-hook-form": "^6.9.6",
"react-input-mask": "^2.0.4",
"react-modal": "^3.11.2",
"react-notifications-component": "^2.4.1",
"react-paginate": "^6.5.0",
"react-progressive-graceful-image": "^0.6.14",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-spinners": "^0.9.0",
"react-string-replace": "^0.4.4",
"react-tabs": "^3.1.1",
"react-test-renderer": "^17.0.1",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-saga": "^1.1.3",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^10.0.2",
"stylus": "^0.54.8",
"yup": "^0.29.3"
},
"homepage": "./",
"jest": {
"moduleNameMapper": {
"\\.(css|styl|svg)$": "identity-obj-proxy"
}
}
}
Here is .babelrc file:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
"#babel/preset-es2015"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties"
]
]
}
Among rules in webpack.config.js I have:
{
test: /\.(js|jsx|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
i using react-native-document-picker for document selection. It is not working in android release mode. But successfully working in debug mode. So i cant see the error. And it works successfully in IOS.
My package.json file:
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#notifee/react-native": "^0.12.2",
"#react-native-community/async-storage": "^1.9.0",
"#react-native-community/checkbox": "^0.5.7",
"#react-native-community/datetimepicker": "^3.0.3",
"#react-native-community/masked-view": "^0.1.9",
"#react-native-community/netinfo": "^9.3.6",
"#react-native-community/picker": "^1.5.1",
"#react-native-community/progress-bar-android": "^1.0.3",
"#react-native-community/progress-view": "^1.2.1",
"#react-native-community/push-notification-ios": "^1.4.1",
"#react-native-firebase/app": "^8.4.1",
"#react-native-firebase/messaging": "7.8.4",
"axios": "^0.21.1",
"date-fns": "^2.28.0",
"moment": "^2.24.0",
"react": "16.13.1",
"react-native": "^0.64.4",
"react-native-animated-pagination-dots": "^0.1.72",
"react-native-autoheight-webview": "^1.6.1",
"react-native-calendars": "^1.1263.0",
"react-native-countdown-circle-timer": "^2.3.7",
"react-native-directory-picker": "^0.0.2",
"react-native-document-picker": "^5.0.0",
"react-native-elements": "^2.1.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-gifted-chat": "^0.16.3",
"react-native-image-picker": "3.2.1",
"react-native-immersive-bars": "^1.0.1",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-month-year-picker": "^1.3.4",
"react-native-paper": "^4.9.2",
"react-native-pdf": "^6.2.2",
"react-native-push-notification": "^5.1.0",
"react-native-reanimated": "2.1.0",
"react-native-redash": "^14.2.3",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.5.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-swipe-list-view": "^3.2.3",
"react-native-vector-icons": "^9.0.0",
"react-native-video": "^4.4.5",
"react-native-webview": "^11.23.1",
"react-navigation": "^4.1.0",
"react-navigation-drawer": "^2.3.4",
"react-navigation-stack": "^2.0.16",
"react-navigation-tabs": "^2.5.6",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/runtime": "^7.11.2",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.2.2",
"eslint": "^7.6.0",
"jest": "^26.2.2",
"metro-react-native-babel-preset": "^0.61.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
my document select code:
try {
const res = await DocumentPicker.pick({
//type: [DocumentPicker.types.allFiles],
type: [DocumentPicker.types.pdf, DocumentPicker.types.images],
});
console.log(
'detailsssss',
res,
res[0].uri,
res[0].type, // mime type
res[0].name,
res[0].size,
);
setDocName(res[0].name);
const path = decodeURI(res[0].uri).replace('file://', '');
const fileType =
Platform.OS == 'ios'
? path.substring(path.length - 4, path.length).replace('.', '')
: res[0].type
.substring(res[0].type.length - 4, res[0].type.length)
.replace('/', '');
console.log(fileType);
console.log(path);
RNFS.readFile(path, 'base64')
.then(data => {
console.log(data);
let fileByte = '';
if (fileType.toLowerCase() == 'pdf') {
fileByte = 'data:application/pdf;base64,' + data;
} else {
fileByte =
'data:image/' + fileType.toLowerCase() + ';base64,' + data;
}
console.log('tippp', fileType);
const file = {
ID: 0,
NAME: res[0].name,
FILE_TYPE: docType,
CREATED_DATE: Moment(new Date()).format('DD.MM.YYYY HH:mm'),
FILE_BYTE: fileByte,
};
filesArray.push(file);
setFiles(filesArray);
setDocCount(filesArray.length + ' doküman seçildi.');
console.log(filesArray);
})
.catch(err => console.error('An error occurred', err));
} catch (err) {
if (DocumentPicker.isCancel(err)) {
console.log('error -----', err);
} else {
throw err;
}
}
I've had this problem for a while, I use the npm run-script build command to build the project and generate the artifact. The project is in React, and depends on umi.
umirc.js:
// ref: http://umijs.org/config/
import webpackConfig from './plugin.config.js'
export default {
exportStatic: {},
chainWebpack: webpackConfig,
sass: {},
treeShaking: true,
theme: {
'primary-color': '#1976D2',
'text-color': ' rgba(0, 0, 0, 0.85)',
},
plugins: [
// ref: http://umijs.org/plugin/umi-plugin-react.html
[
'umi-plugin-react',
{
antd: true,
dva: false,
title: 'my-app',
dll: true,
locale: {
enable: true,
default: 'pt-BR',
},
routes: {
exclude: [
/tabs\//,
/modals\//,
/components\//,
/context\//,
/utils\//,
/enums/,
// modules
///Assets\//,
/ComponentTest/,
///Contract\//,
///Notification\//,
///InvoiceManagement\//,
/financial\//,
///Licensing\//,
///Log\//,
///MaterialRequest\//,
/modalsExamples\//,
///Network\//,
///OccurrenceRoutine\//,
/pdfExamples\//,
///Permissions\//,
///Registration\//,
///Services\//,
// /Schedule\//,
///Purchase\//,
///Person\//,
// /Region\//,
///ServiceOrder\//,
///DocumentGenerator\//,
],
},
// dynamicImport: {},
},
],
],
}
package.json:
{
"private": true,
"scripts": {
"predevelop": "tailwind build ./src/tailwind.css -c ./tailwind.config.js -o ./src/index.css",
"prebuild": "tailwind build ./src/tailwind.css -c ./tailwind.config.js -o ./src/index.css",
"develop": "umi dev",
"build": "umi build",
"test": "umi test --coverage --watchAll=true",
"test:watch": "jest --watch",
"lint-staged": "lint-staged",
"lint": "eslint --ext .jsx --ext .js src --fix"
},
"dependencies": {
"#ant-design/compatible": "^1.0.2",
"#ant-design/icons": "^4.4.0",
"#antv/data-set": "^0.10.2",
"#david.kucsai/react-pdf-table": "^0.1.1",
"#fnando/cpf": "^0.1.1",
"#khanacademy/react-multi-select": "^0.3.3",
"#react-mock/localstorage": "^0.1.2",
"#react-pdf/renderer": "^1.6.8",
"#softin/person": "^1.0.8",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^9.4.0",
"#use-it/interval": "^0.1.3",
"antd": "^4.18.8",
"axios": "^0.26.0",
"axios-mock-adapter": "^1.17.0",
"bizcharts": "^3.5.9",
"constate": "^2.0.0",
"draftjs-to-html": "^0.9.1",
"ignore-case": "^0.1.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^3.0.2",
"leaflet": "^1.6.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"pdfmake": "^0.1.70",
"prop-types": "^15.7.2",
"query-string": "^6.13.8",
"randomcolor": "^0.6.2",
"rc-tween-one": "^2.6.8",
"react": "^16.13.1",
"react-big-calendar": "^0.23.0",
"react-data-export": "^0.5.0",
"react-dnd": "latest",
"react-dnd-html5-backend": "latest",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.4",
"react-drag-listview": "^0.1.8",
"react-input-mask": "^2.0.4",
"react-leaflet": "^2.6.1",
"react-number-format": "^4.4.4",
"react-responsive": "^8.2.0",
"react-router-breadcrumbs-hoc": "^3.3.1",
"react-select": "^3.2.0",
"react-sortable-tree": "^2.7.1",
"react-sortable-tree-theme-full-node-drag": "^1.1.0",
"reqwest": "^2.0.5",
"tailwindcss": "^1.1.4",
"umi": "^2.13.17",
"umi-plugin-react": "^1.15.2",
"wait-for-expect": "^3.0.1",
"with-wrapper": "^1.0.1",
"xlsx": "^0.18.2"
},
"devDependencies": {
"#testing-library/user-event": "^13.1.9",
"babel-eslint": "^10.0.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.10.0",
"eslint-config-umi": "^1.6.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jest": "^23.6.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^2.3.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"react-test-renderer": "^16.12.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"engines": {
"node": ">=8.0.0"
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
},
"bit": {
"env": {},
"componentsDefaultDirectory": "components/{name}",
"packageManager": "npm"
}
}
In umirc.js you get the exportStatic where they are also generated in html file formats in each of the folders, there are several subprojects, but it is generating part of it, each subproject is in the file routes, I need to generate it completely. Could anyone help me with this?
I built the NPM package based on components written in React and Typescript.
Export that package as npm
Install package into another React with TS repo
Result: Error appear:
Failed to compile.
./node_modules/#nikolatrajkovic123/ec-general-section-form/HubSectionPack.tsx
10:5 Module parse failed: Unexpected token (10:5) You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders | import
'./package-styles.scss'; |
type HubSectionPackProps = { | sectionName: SectionName; | // eslint-disable-next-line
Babel
{
"presets": ["#babel/preset-env", "#babel/preset-react", "env", "react"],
"plugins": ["transform-class-properties"]
}
Webpack:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/index.tsx',
},
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides',
),
},
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss'],
},
plugins: [new webpack.CleanPlugin()],
output: {
filename: '[name].[contenthash].js',
path: path.join(__dirname, 'dist'),
},
};
Package.json of the package:
{
"name": "#nikolatrajkovic123/hub-section-form",
"version": "1.3.8",
"description": "Enrollment / Hub section form",
"main": "./index.ts",
"module": "./dist/index.es.js",
"types": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/Bestowinc/enrollment-client.git"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"author": "Direct Team",
"license": "MIT",
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#bestowinc/bestow-logger": "1.0.26",
"#bestowinc/enroll-sdk-core": "^0.9.40",
"#bestowinc/kindred-ds": "^0.6.2",
"#hookform/resolvers": "^2.7.1",
"#sentry/minimal": "^6.14.1",
"#sentry/react": "^6.3.6",
"#sentry/tracing": "^6.3.6",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^12.1.2",
"#tippyjs/react": "^4.2.5",
"#types/react-slider": "^1.3.1",
"#types/uuid": "^8.3.1",
"#xstate/inspect": "^0.4.1",
"#xstate/react": "^1.3.1",
"auth0-js": "^9.16.4",
"autoprefixer": "^9",
"cleave.js": "^1.6.0",
"fast-glob": "^3.2.7",
"file-loader": "^6.2.0",
"ismobilejs": "^1.1.1",
"jest": "^26.6.3",
"jwt-decode": "^3.1.2",
"lodash.get": "^4.4.2",
"lodash.merge": "^4.6.2",
"lodash.noop": "^3.0.1",
"lodash.unset": "^4.5.2",
"path": "^0.12.7",
"postcss": "^8.3.11",
"postcss-loader": "^4.2.0",
"postcss-scss": "^3.0.4",
"react-hook-form": "^7.15.3",
"react-router-dom": "^5.2.0",
"react-slider": "^1.3.1",
"sass": "^1.32.7",
"styled-components": "^5.3.2",
"styled-system": "^5.1.5",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"tippy.js": "^6.3.1",
"tsconfig": "^7.0.0",
"typescript": "^4.4.4",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"xstate": "^4.17.0",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.16.4",
"#babel/preset-flow": "^7.16.0",
"#babel/preset-react": "^7.12.10",
"#babel/preset-typescript": "^7.16.0",
"#bestowinc/xray-test-util": "^1.1.4",
"#craco/craco": "^6.1.2",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^21.0.1",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^11.1.1",
"#rollup/plugin-replace": "^3.0.0",
"#rollup/plugin-url": "^6.1.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#types/auth0-js": "^9.14.2",
"#types/chance": "^1.1.1",
"#types/cleave.js": "^1.4.4",
"#types/history": "4.7.9",
"#types/jest": "^26.0.19",
"#types/lodash.get": "^4.4.6",
"#types/lodash.merge": "^4.6.6",
"#types/lodash.noop": "^3.0.6",
"#types/lodash.pick": "^4.4.6",
"#types/node": "^12.19.9",
"#types/react": "^16.14.2",
"#types/react-dom": "^17.0.7",
"#types/react-router-dom": "^5.1.7",
"#types/react-slider": "^1.3.1",
"#types/segment-analytics": "^0.0.34",
"#types/styled-components": "^5.1.15",
"#types/styled-system": "^5.1.13",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "^4.15.0",
"#typescript-eslint/parser": "^4.15.0",
"babel-loader": "8.1.0",
"babel-plugin-styled-components": "^1.13.3",
"chance": "^1.1.7",
"circle-github-bot": "^2.1.0",
"css-loader": "^5.0.2",
"cypress": "9.0.0",
"cypress-terminal-report": "^3.3.4",
"eslint": "^7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"firebase-tools": "^9.10.2",
"husky": "^6.0.0",
"jsonwebtoken": "^8.5.1",
"luxon": "^1.26.0",
"mini-css-extract-plugin": "^1.3.6",
"neat-csv": "^6.0.1",
"pdf-parse": "^1.1.1",
"prettier": "2.2.1",
"progress-bar-webpack-plugin": "^2.1.0",
"react-scripts": "4.0.1",
"rollup": "^2.38.4",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^3.0.1",
"rollup-plugin-url-resolve": "^0.2.0",
"sass-loader": "10.1.1",
"sinon": "^9.2.4",
"source-map-explorer": "^2.5.2",
"style-loader": "^2.0.0",
"typescript": "4.2.2"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"resolutions": {
"tslib": "2.3.1"
},
"external": [
"react",
"react-dom"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "rollup -c --watch",
"build": "rollup -c"
},
"bugs": {
"url": "https://github.com/issues"
},
"homepage": "https://github.com/readme"
}
My directory structure is like this.
I want to use "build": "webpack --config webpack.prod.js --progress",, then the case will create a new folder named product.
I hope this new folder can create a folder named config which is copied from the folder named config in the public folder in it and includes setting.js, and create a folder named virtual which is also copied from the public.
But i don't know how to configure the webpack.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const manifest = require('./public/dist/vendor-manifest.json');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
module.exports = {
entry: {
app: './src/main.js'
},
output: {
filename: 'dist/[name].[chunkhash:8].js',
path: path.resolve(__dirname, 'product')
},
plugins: [
new HtmlWebpackPlugin({
filename: './index-package.html',
template: './src/index.html',
favicon: './src/favicon.ico',
alwaysWriteToDisk: true
}),
new HtmlWebpackIncludeAssetsPlugin({
assets: ['dist/'+ manifest.name + '.dll.js'],
append: false // 不会被 webpack 自动打包
}),
new HtmlWebpackHarddiskPlugin(), // 将[venderName + '.js']和['env-config.js']放进 index.html 中
new UglifyJSPlugin()
],
};
package.json
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js --progress",
"dev-dll": "NODE_ENV=develop webpack --config webpack.dll.js --progress",
"build": "webpack --config webpack.prod.js --progress",
"build-dll": "NODE_ENV=production webpack --config webpack.dll.js --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^3.1.4",
"babel-runtime": "^6.26.0",
"echarts": "^4.0.2",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.2",
"babel-plugin-import": "^1.6.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.18.2",
"clean-webpack-plugin": "^0.1.17",
"cookie-parser": "^1.4.3",
"css-loader": "^0.28.7",
"eslint": "^4.11.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.4.0",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-exclude-assets-plugin": "0.0.6",
"html-webpack-plugin": "^2.30.1",
"html-webpack-template": "^6.1.0",
"jest": "^21.2.1",
"json-loader": "^0.5.7",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"prop-types": "^15.6.0",
"redux-devtools": "^3.4.1",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"csv-loader": "^2.1.1",
"webpack": "^3.8.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.9.4",
"webpack-merge": "^4.1.0",
"xml-loader": "^1.2.1",
"webpack-bundle-analyzer": "^2.9.2",
"html-webpack-harddisk-plugin": "^0.1.0",
"html-webpack-include-assets-plugin": "^1.0.2"
}
}
node version v6.11.3
Try this plugin ?
Hope this is fit you.
https://github.com/webpack-contrib/copy-webpack-plugin