Webpack

How to use ng-annotate with hybrid app based on angular-cli

由 孤街醉人 提交于 2021-01-28 09:24:03
问题 I'm working on an Angular.js project written with TypeScript. We're trying to evaluate whether to upgrade to Angular 8 and we're stuck with how to use ng-annotate with angular-cli's webpack configuration. I believe that this can be achieved either by using the @angular-builders/custom-webpack tool or by using ngx-build-plus tool but I had not succeeded with neither of them. My current attempt includes a partial webpack file for ngx-build-plus with the following configuration : module: { rules

Error on type Props in react flow, converting create-react app to webpack

由 孤街醉人 提交于 2021-01-28 08:06:38
问题 I am trying to convert a create-react app to a webpack app. The context behind this is that I originally have a app that was made using create-react. I wanted to run that project using webpack. I took an app that I had that was running on webpack, and then I delete all its source files, replacing the with the source files from the create react app. After that, I took package.json dependencies and moved them over from the package.json of the create-react app. I think perhaps I need some extra

webpack 5 +React-hot-loader

由 丶灬走出姿态 提交于 2021-01-28 07:28:38
接 Webpack 5的最完整指南 React-hot-loader 热模块更换 在源代码中进行了某些更改，所做的更改就会应用到在浏览器中运行的应用中，而无需重新加载整个页面。 首先，安装： npm install --save-dev react-hot-loader 增加 webpack 配置 +const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { index: path.resolve(__dirname, 'app', 'index.js'), }, output: { path: path.resolve(__dirname, 'build'), }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'app', 'index.html'), }), + new webpack.HotModuleReplacementPlugin(), ], devServer: { port: 10010,

Stylus syntax - where do imports come from?

由 旧城冷巷雨未停 提交于 2021-01-28 07:10:17
问题 I've got a file called "quasar.styl": @import './quasar.variables' @import '~quasar-styl' When it gets processed by webpack, using styl-loader, I get this error: failed to locate @import file ~quasar-styl.styl I have this feeling there's something about stylus I don't understand. Where would it be looking for the file "~quasar-style"? This file comes from a working boilerplate quasar app, and there isn't a file called quasar-style anywhere in the app directories, especially not is node

Browsersync Couldn't open browser, using Docker and Webpack

由 允我心安 提交于 2021-01-28 06:51:37
问题 Problem When I run npm run start to serve and watch via webpack, I got the warning below, after the scripts finish execution. I'm getting the browser up and running, it loads the page perfectly and shows a notification that it's connected to Browsersync. But when I do any change to any file (html, css or js). It doesn't reload!? Is it because I am in a Docker virtual environment, or because I'm not correctly instructing Browsersync to look for the right path of where my code is, or something

Url Loader, loading my background image once then after refreshing the page it fails to appear

由 旧巷老猫 提交于 2021-01-28 06:50:05
问题 I'm using next.js with file-loader and url-loader to load in images into my React components like below: import background from '@/assets/mountain-shot.jpg'; const Section = styled.section` background-color: #f3f3f3; background-image: url(${background}); background-size: cover; background-position: center; box-shadow: inset 2px 33px 97px -21px rgba(0,0,0,0.75); position: relative; `; As you can see I'm importing an image and outputting it in the styled components. If I remove the background

'SyntaxError: Unexpected strict mode reserved word' when editing my reactjs webpack config file

由 ▼魔方 西西 提交于 2021-01-28 04:11:51
问题 I was trying to fix my Invalid Host Error by following the directions on the answer to this question: I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely However, when I do what they say, I get this error: frontend@0.1.0 start /home/ubuntu/app/frontend react-scripts start /home/ubuntu/app/frontend/node_modules/react-scripts/config/webpack.config.js:722 public: 'mywebsite.org' // That solved it ^^^^^^ SyntaxError: Unexpected strict mode reserved word at

I'm using create-react-app and I need to open build/index.html in browser directly without a server

由 混江龙づ霸主 提交于 2021-01-28 02:37:49
问题 I'm struggling to find the solution to this issue. I'm using create-react-app and after running npm build I want to be able to open index.html in browser with 'doubleclick' from file location, without the need of npm or any server. I also want my routes and functionality of the app to work in this scenario. I've been doing some research on the matter but couldn't find much. I would like to know if it's possible and if anyone has any links or even solutions to share in case I'm missing

Webpack build Failed, Throws Unexpected Token Error JSX syntax

由 房东的猫 提交于 2021-01-28 01:28:36
问题 ERROR in ./client/index.js Module build failed: SyntaxError: Unexpected token (31:4) const Root = () => { return ( <ApolloProvider client={client}> ^ <Router history={hashHistory}> My Webpack config file below: const path = require('path'), webpack = require("webpack"), clientPath = path.join(__dirname, 'client'), HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: path.join(clientPath, 'index.js'), output: { path: __dirname, filename: 'bundle.js' }, module: { rules:

How to replicate next js “public” folder behaviour with webpack?

由 余生颓废 提交于 2021-01-28 01:18:40
问题 Next js recently added public folder functionality which in its essence resolves urls like these: background-image: url(/images/test.png); <img src="/images/test.png" />; require("/images/test.png") From wherever you are in your source code to a public directory located at the root of your project. I am trying to replicate this in a non next js project that uses webpack, I initially played with publicPath property, but I'm either missing something or this is not how its done. Hence the
订阅 Webpack