glook / webpack-typescript-react Goto Github PK
View Code? Open in Web Editor NEWWebpack 5 boilerplate with support of most common loaders and modules (see tags and description)
License: MIT License
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
License: MIT License
C:\projects\webpack5-react-typescript>yarn start
yarn run v1.22.15
$ cross-env WEBPACK_IS_DEV_SERVER=true NODE_ENV=development webpack serve --config webpack.config.babel.js
[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
at WebpackCLI.makeCommand (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:108:21)
at ServeCommand.apply (C:\projects\webpack5-react-typescript\node_modules@webpack-cli\serve\lib\index.js:41:19)
at loadCommandByName (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:626:35)
at Command. (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:1091:23)
at Command.listener [as _actionHandler] (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:922:31)
at Command._parseCommand (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:1503:14)
at Command.parse (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:1292:10)
at Command.parseAsync (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:1318:10)
at WebpackCLI.run (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:1123:28)
at runCLI (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\bootstrap.js:11:19)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Checkout repo, run npm i
Error below:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@"~5.24.2" from the root project
npm ERR! peer webpack@">=4.43.0 <6.0.0" from @pmmmwh/[email protected]
npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR! dev @pmmmwh/react-refresh-webpack-plugin@"~0.4.2" from the root project
npm ERR! 1 more (webpack-dev-server)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.20.2" from [email protected]
npm ERR! node_modules/webpack-plugin-serve
npm ERR! peerOptional webpack-plugin-serve@"0.x || 1.x" from @pmmmwh/[email protected]
npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR! dev @pmmmwh/react-refresh-webpack-plugin@"~0.4.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Possibly due to npm 7 (running 7.5.4 here ) shellscape/webpack-plugin-serve#195
EDIT: Running this passes install.
npm i --legacy-peer-deps
with nested route react-router-dom v6 have a problem in webpack
I've got a react component I'd like to build to and serve from another folder other than src
, let´s say the following is my project folder structure:
.
├── ...
├── docs # Serve files on /docs folder instead of /src
│ └── build # Build the contents of /src to /docs/build
│ ├── index.js
│ ├── api.tsx
│ ├── index.tsx
│ ├── index.html
├── webpack
├── src # Project files
└── ...
What I'm trying to achieve is to have webpack build the contents of /src
(which is a React Component) to /docs/build
and then serve the /docs
folder instead of /src
. Within the /docs
folder, index.html loads index.js from /docs/build
folder...
Does anyone have any directions on how to achieve such a config? I'd like to keep the default settings as is, but create an alternate webpack config and a package.json script such as "build-serve-docs" as a separated command.
Thanks in advance.
Hi!
Nice work, I tried it out and it gives me an error when running npm run start
with the latest node and npm version (15.5.0) after looking at the error message (node:50249) UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked without 'new'
I looked at the webpack-cli repo and found Error when run npm start: Class constructor ServeCommand cannot be invoked without 'new': which have reported the error.
In short, the order needs to be: Syntax - webpack [command] [options]
and the latest webpack needs to be 4.3.1.
Added a pull-request for the issue, tested and working #6
Cheers!
I am getting InvalidCharacterError
when trying to import a png
import PngLogo from '@images/logo.png'``
I added the delaration declare module '*.png'
on @types but still not working
能麻烦出一版配置antd并进行按需引入的版本嘛,我在原来的基础上尝试了一番,但是没有成功
Прежде всего, это отличный шаблон, и спасибо за проделанную работу. Извините за мое невежество, но мне просто интересно, как мы импортируем изображения, кроме файла .svg? Я имею в виду, как мы импортируем их (например, .jpeg.jpg.png и т.д.), есть ли у вас какие-нибудь советы для меня? Спасибо.
Hello, I am getting the following error when I try to add a css file to the vanilla project:
ERROR in ../src/styles/styles.css (../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[2]!../node_modules/css-loader/dist/cjs.js!../src/styles/styles.css) Module build failed (from ../node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: error processing CSS .../src/styles/styles.css:1:1: Unknown word at Input.error (.../sample-project/node_modules/resolve-url-loader/node_modules/postcss/lib/input.es6:108:16) at encodeError (.../sample-project/node_modules/resolve-url-loader/index.js:287:12) at onFailure (.../sample-project/node_modules/resolve-url-loader/index.js:228:14) @ ../src/styles/styles.css 8:20-236 61:4-82:5 64:18-234 @ ../src/index.tsx 8:0-28
How can integrate Progressive web apps by this app?
is there any guide working with manifest json and base configuration?
Node: v12.18.4
run: yarn install
[webpack-cli] TypeError: cli.isValidationError is not a function
at Command.<anonymous> (C:\Users\User\Downloads\webpack-typescript-react-master\node_modules\@webpack-cli\serve\lib\index.js:96:25)
error Command failed with exit code 2.
My development machine is a mac. When I started it, I found that the js file could not be found, and the js path address was found to be 0.0.0.0. The correct path is 127.0.0.1
export const devServerHost = isWindows() ? '127.0.0.1' : '0.0.0.0';
Toying around with a webpack 5 upgrade and just finished figuring out a small error message I was receiving when doing
yarn start
with this project.
Heres the error:
yarn run v1.22.5
$ webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config webpack.config.babel.js
at Hash.update (internal/crypto/hash.js:84:11)
at BulkUpdateDecorator.update (FrontEnd.New\node_modules\webpack\lib\util\createHash.js:51:14)
at NormalModule.updateHash (FrontEnd.New\node_modules\webpack\lib\NormalModule.js:1129:8)
at Compilation._createModuleHash (FrontEnd.New\node_modules\webpack\lib\Compilation.js:3092:10)
at Compilation.createModuleHashes (FrontEnd.New\node_modules\webpack\lib\Compilation.js:3064:10)
at FrontEnd.New\node_modules\webpack\lib\Compilation.js:2341:11
at Hook.eval [as callAsync] (eval at create (FrontEnd.New\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (FrontEnd.New\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
at FrontEnd.New\node_modules\webpack\lib\Compilation.js:2301:36
at eval (eval at create (node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
Traced the issue to react-refresh-webpack-plugin pmmmwh/react-refresh-webpack-plugin#289
To fix simply add the webpack.HotModuleReplacementPlugin to the list of plugins in dev.js as the dev suggests. I assume in a future version this won't be an issue any longer.
/**
* Created by: Andrey Polyakov ([email protected])
*/
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import { HotModuleReplacementPlugin } from 'webpack';
import {devServerConfig} from './config';
export default {
devtool: 'cheap-module-source-map',
plugins: [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()],
devServer: devServerConfig,
};
Cheers
this repo is not working on 20.12.1 node version
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.