«webpack» 태그된 질문

Webpack은 JavaScript 모듈 번 들러입니다. Webpack은 종속성이있는 모듈을 가져 와서 해당 모듈을 나타내는 정적 자산을 생성합니다. Webpack의 주요 기능은 확장성에 뿌리를두고 있으며 개발자가 웹 아키텍처 및 웹 성능에서 모범 사례를 사용할 수 있도록합니다.

4
구성 파일을 저장하고 React를 사용하여 읽는 방법
나는 react.js에 새로 왔으며 서버에서 데이터를 가져 와서 다음과 같이 사용하는 하나의 구성 요소를 구현했습니다. CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, 구성 파일에 …

5
Webpack babel 6 ES6 데코레이터
내 번 들러로 webpack을 사용하여 ES6로 작성된 프로젝트가 있습니다. 대부분의 트랜스 파일은 잘 작동하지만 아무 데나 데코레이터를 포함하려고하면이 오류가 발생합니다. Decorators are not supported yet in 6.x pending proposal update. 바벨 이슈 트래커를 살펴 보았지만 거기에서 아무것도 찾을 수 없었기 때문에 잘못 사용하고 있다고 가정합니다. 내 웹팩 구성 (관련 비트) …

11
Webpack-webpack-dev-server : 명령을 찾을 수 없습니다.
이 튜토리얼 과 함께 webpack을 사용하여 React webapp에서 작업하고 있습니다 . 실수로 내 자식에 node_modules 폴더를 추가했습니다. 그런 다음을 사용하여 다시 제거했습니다 git rm -f node_modules/*. 이제 웹팩 서버를 시작하려고하면 다음 오류가 발생합니다. > webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors sh: webpack-dev-server: command not found npm ERR! Darwin …
97 node.js  npm  webpack 

2
Chrome 메모리 캐시와 디스크 캐시
크롬 메모리 캐시와 디스크 캐시에 관심이 있습니까? 나는 webpack, common chunks 플러그인을 사용하고 chunkhash로 모든 파일을 생성합니다. 메모리는 디스크 캐시와 어떻게 다릅니 까? 내 페이지를 다시로드하면 일부 파일은 메모리 캐시에서로드되고 일부는 디스크 캐시에서로드됩니다 (메모리 캐시의 bundle.js 및 image.jpg, 디스크 캐시의 CSS). 때로는 다릅니다. 그것을 제어하고 어디에서로드되는 것을 선택할 수 있습니까? …

11
React.js에서 Google 글꼴을 사용하는 방법은 무엇입니까?
React.js 와 webpack 으로 웹 사이트를 구축했습니다 . 웹 페이지에서 구글 폰트 를 사용하고 싶어서 링크를 섹션에 넣었습니다. Google 글꼴 <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> 그리고 CSS 설정 body{ font-family: 'Bungee Inline', cursive; } 그러나 작동하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

2
prefetchPlugin 및 분석 도구를 사용하여 웹팩의 빌드 시간을 최적화하는 방법은 무엇입니까?
이전 연구 : 웹팩의 위키가 말했듯이 분석 도구를 사용하여 빌드 성능을 최적화 할 수 있습니다. 에서 : https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats 빌드 통계의 힌트 빌드를 시각화하고 빌드 크기와 빌드 성능을 최적화 할 수있는 방법에 대한 힌트를 제공 하는 분석 도구 가 있습니다 . webpack --profile --json> stats.json을 실행하여 필요한 JSON 파일을 생성 할 …

1
Ruby on Rails, Webpack 및 React JS를 사용하여 Chrome에서 한 줄씩 소스 맵
inline-source-mapChrome devtools 디버거를 사용할 때 구성 설정을 사용하여 Webpack에서 생성 한 소스 맵이 한 줄씩 꺼지는 문제가 있습니다. Webpack은 Ruby on Rails 애플리케이션 내부에 설정되어 수십 개의 모듈로 구성된 연결되고 축소되지 않은 JavaScript 파일을 생성합니다. 대부분의 모듈은 ReactJS 구성 요소이며 jsx로더에 의해 구문 분석됩니다 . Webpack의 출력은 application.jsgem에서 생성 한 …


6
require 문없이 웹팩을 사용하여 디렉토리의 모든 파일을로드하는 방법
내 앱에 많은 양의 자바 스크립트 파일이 4 개의 하위 디렉토리로 분할되어 있습니다. grunt에서 나는 그것들을 모두 잡고 하나의 파일로 컴파일합니다. 이러한 파일에는 module.exports 기능이 없습니다. webpack을 사용하여 4 부분으로 나누고 싶습니다. 수동으로 들어가서 모든 파일을 요구하고 싶지 않습니다. 컴파일시 디렉토리 트리를 탐색 한 다음 모든 .js 파일 이름과 경로를 …

5
Bootstrap4 종속성 PopperJs가 Angular에서 오류를 발생시킵니다.
방금 새로 만든 각도 CLI.angular-cli.json 의 관련 부분을 아래와 같이 프로젝트 실행 npm install bootstrap@4.0.0-beta jquery popper.js --save 및 변경 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], 그러나 아래 오류가 발생합니다. 10:2287 Uncaught SyntaxError: Unexpected token export at eval (<anonymous>) at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9) at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1) at …

2
Webpack 대 webpack-dev-server 대 webpack-dev-middleware 대 webpack-hot-middleware 대 etc
나는 작업을 시작하고 webpackA를 node/express개발 환경 ReactJS과 서버 측 렌더링 응용 프로그램을 react-router. dev 및 prod (런타임) 환경에서 각 웹팩 패키지의 역할에 대해 매우 혼란 스럽습니다. 내 이해에 대한 요약은 다음과 같습니다. webpack: 웹 애플리케이션의 여러 부분을 결합한 다음 단일 .js 파일 (일반적으로 bundle.js)로 묶는 패키지 인 도구 입니다. 결과 …

8
Webpack 프로덕션 코드 빌드 방법 및 사용 방법
저는 webpack을 처음 접했고 프로덕션 빌드에서 전체 코드의 크기를 줄일 수 있다는 것을 알았습니다. 현재 webpack은 약 8MB 파일과 약 5MB의 main.js를 빌드합니다. 프로덕션 빌드에서 코드 크기를 줄이는 방법은 무엇입니까? 인터넷에서 샘플 웹팩 구성 파일을 찾았고 내 응용 프로그램에 대해 구성하고 실행 npm run build하고 빌드를 시작했으며 ./dist/디렉토리에 일부 파일을 …

9
Webpack을 사용하는 환경 기반 조건부 빌드
개발을위한 몇 가지 사항이 있습니다. 예를 들어 배포 된 빌드 파일을 부 풀리지 않게하고 싶은 모의 작업이 있습니다. RequireJS에서는 플러그인 파일에 구성을 전달할 수 있으며이를 기반으로 조건부로 요구할 수 있습니다. 웹팩의 경우이 작업을 수행하는 방법이없는 것 같습니다. 먼저 환경에 대한 런타임 구성을 만들기 위해 resolve.alias 를 사용 하여 환경에 따라 …

3
vue.js 웹팩 프로젝트에서 favicon.ico를 올바르게 설정하는 방법은 무엇입니까?
을 vue webpack사용하여 프로젝트를 만들었습니다 vue-cli. vue init webpack myproject 그런 다음 dev모드 에서 프로젝트를 실행했습니다 . npm run dev 이 오류가 발생했습니다. 리소스를로드하지 못했습니다. 서버가 404 (찾을 수 없음) 상태로 응답했습니다. http : // localhost : 8080 / favicon.ico 그래서 webpack 내부에서 favicon.ico올바르게 가져 오는 방법은 무엇입니까?

4
Webpack-dev-server는 앱 페이지 대신 디렉토리 목록을 제공합니다.
에서 실제 앱만 볼 수 있습니다 /public. 의 구성 webpack.config.js은 다음과 같습니다. var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: …

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.