프로그램 작성 webpack

9

webpack-dev-server가 react-router의 진입 점을 허용하도록 허용하는 방법

React-router와 함께 개발에서 webpack-dev-server를 사용하는 앱을 만들고 있습니다. webpack-dev-server는 한곳에 공개 진입 점 (예 : "/")이 있다는 가정하에 구축 된 것으로 보이지만 react-router는 무제한 진입 점을 허용합니다. webpack-dev-server의 이점, 특히 생산성에 좋은 핫 리로딩 기능을 원하지만 여전히 react-router에 설정된 경로를로드 할 수 있기를 원합니다. 함께 작동하도록 어떻게 구현할 수 있습니까? …

117 javascript reactjs webpack react-router

18

실험적 구문 'classProperties'에 대한 지원이 현재 활성화되어 있지 않습니다.

Django 프로젝트에서 React를 설정하는 동안이 오류가 발생했습니다. 모듈 빌드의 ModuleBuildError 실패 (./node_modules/babel-loader/lib/index.js에서) : SyntaxError : C : \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js : 실험적 구문 'classProperties 지원 '는 현재 활성화되어 있지 않습니다 (17 : 9) : 15 | 16 | class …

117 reactjs webpack babeljs babel

3

HtmlWebpackPlugin은 루트가 아닌 웹 사이트 경로를로드 할 때 중단되는 상대 경로 파일을 삽입합니다.

webpack과 HtmlWebpackPlugin을 사용하여 번들 된 js 및 css를 html 템플릿 파일에 삽입하고 있습니다. new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), 그리고 다음 html 파일을 생성합니다. <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> 이것은 앱의 루트를 방문 할 때 …

116 javascript express webpack react-router

20

React-Native : 모듈 AppRegistry는 등록 된 호출 가능 모듈이 아닙니다.

현재 Android 에뮬레이터 에서 ES6 react-native-webpack-server를 실행 하려고합니다 . 차이점은 내가 업그레이드 package.json하고 build.gradereact을 사용 0.18.0하고 부팅 시이 오류가 발생 한다는 것 입니다. 내가 아는 AppRegistry한 올바르게 가져옵니다. 코드를 주석 처리하더라도이 오류는 여전히 발생합니다. 이것은 문제없이 iOS에서 작동합니다. 내가 뭘 잘못하고 있죠? 편집 : 0.18.0을 지원하는 다른 상용구를 시도한 후에도 …

114 android react-native webpack

6

Webpack 4-최소화를 구성하는 방법?

Webpack 4에는 다음 설명이 함께 제공됩니다. webpack.optimize.UglifyJsPlugin이 제거되었습니다. 대신 config.optimization.minimize를 사용하십시오. 충분히 공평하지만, 예를 들어 캐시 디렉토리를 변경하기 위해 내부에서 실행되는 UglifyJsPlugin 인스턴스 구성에 대한 정보를 찾을 수 없습니다. 할 수 있습니까?

114 javascript webpack webpack-4

5

로컬 네트워크의 장치에서 webpack-dev-server에 액세스하는 방법은 무엇입니까?

일부 웹팩 개발 서버 구성이 있습니다 (전체 구성의 일부입니다). config.devServer = { contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'), stats: { modules: false, cached: false, colors: true, chunk: false }, proxy: [{ path: /^\/api\/(.*)/, target: options.proxyApiTarget, rewrite: rewriteUrl('/$1'), changeOrigin: true }] }; function rewriteUrl(replacePath) { return function (req, opt) …

112 javascript node.js networking webpack web-development-server

7

Webpack을 사용하여 jQuery를 실제 Window 개체에 노출

브라우저의 개발자 콘솔 내에서 액세스 할 수있는 전역 창 개체에 jQuery 개체를 노출하고 싶습니다. 이제 내 webpack 구성에 다음 줄이 있습니다. plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] 이 줄은 내 웹팩 모듈의 각 파일에 jQuery 정의를 추가합니다. 그러나 프로젝트를 빌드하고 다음과 같이 개발자 콘솔에서 jQuery에 액세스하려고 …

111 javascript jquery webpack

17

Typescript react- ''react-materialize '모듈에 대한 선언 파일을 찾을 수 없습니다. 'path / to / module-name.js'에는 암시 적으로 모든 유형이 있습니다.

react-materialize에서 구성 요소를 가져 오려고합니다. import {Navbar, NavItem} from 'react-materialize'; 그러나 웹팩이 내 컴파일을 할 때 .tsx위와 같은 오류가 발생합니다. ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. 이 ts-loader.I에 대한 해결 방법이 가져 오기 …

110 reactjs webpack webpack-2

4

할당 왼쪽의 자바 스크립트 개체 대괄호 표기법 ({Navigation} =)

나는이 구문을 전에 본 적이 없으며 그것이 무엇에 관한 것인지 궁금합니다. var { Navigation } = require('react-router'); 왼쪽의 괄호는 구문 오류를 발생시킵니다. 예기치 않은 토큰 { 웹팩 구성의 어떤 부분이 변환되는지 또는 구문의 목적이 무엇인지 잘 모르겠습니다. 하모니인가요? 누군가 나를 깨달을 수 있습니까?

108 javascript webpack ecmascript-6

19

글꼴 'data : font / woff…'로드 거부는 다음 콘텐츠 보안 정책 지침을 위반합니다 :“default-src 'self'”. 'font-src'에 유의하십시오.

내 반응 웹 앱이 브라우저 콘솔 에서이 오류를 제공합니다. Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 또한: Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the …

108 javascript reactjs webpack

2

이“react-scripts eject”명령은 무엇을합니까?

뭐라고합니까 npm run eject명령은 무엇입니까? 다른 명령이 시작, 빌드, 테스트와 같은 기능을 이해합니다. 그러나 꺼내는 것에 대해서는 전혀 모릅니다.

108 reactjs webpack create-react-app react-scripts

6

webpack은 jsx라는 파일 인 경우 모듈을 찾을 수 없습니다.

webpack.config.js를 이렇게 작성하면 module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; 그리고 모듈을 index.jsx가져옵니다.reactApp import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let …

107 reactjs webpack webpack-dev-server

7

Webpack 및 Babel을 사용하여 "이 파일 유형을 처리하려면 적절한 로더가 필요할 수 있습니다."

ES6 자산을 컴파일하기 위해 Babel과 함께 Webpack을 사용하려고하는데 다음과 같은 오류 메시지가 나타납니다. You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' 내 Webpack 구성은 다음과 같습니다. var path = require('path'); var webpack = …

106 javascript webpack babeljs es6-module-loader

4

Webpack 로더 대 플러그인; 차이점이 뭐야?

Webpack의 로더와 플러그인의 차이점은 무엇입니까? 플러그인에 대한 문서 는 다음과 같습니다. 플러그인을 사용하여 일반적으로 웹팩의 번들과 관련된 기능을 추가합니다. babel이 jsx / es2015 변환에 로더를 사용한다는 것을 알고 있지만 다른 일반적인 작업 (예 : copy-webpack-plugin) 대신 플러그인을 사용하는 것처럼 보입니다.

104 javascript reactjs webpack

5

웹팩을 사용하여 디렉토리에서 동적으로 이미지 가져 오기

따라서 ES6를 통해 웹팩에서 이미지와 아이콘을 가져 오는 현재 작업 흐름은 다음과 같습니다. import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> 이것은 빨리 지저분해진다. 내가 원하는 것은 다음과 같습니다. import * from './images' <img src={doggy} /> <img src={turtle} /> …

104 reactjs webpack ecmascript-6

«webpack» 태그된 질문