JS 파일을 함께 묶지 않는 Webpack 구성

Webpack을 사용하여 클라이언트에서 실행되는 JS 번들과 서버에서 실행되는 JS 번들의 두 세트를 생성합니다. 서버의 경우, 내가 좋아하는 것 웹팩이 같은 파일을 함께 묶을 수 없습니다 : 나는 webpack-output-for-server/entry-point.js을 실행할 때,JS 파일을 함께 묶지 않는 Webpack 구성

source/ 
    entry-point.js # requires component.js 
    component.js 

webpack-output-for-server/ 
    entry-point.js 
    component.js

이 방법을 잠재적 component.js에서 예외가 발생, 파일 이름은에 의존하지 않고 스택 추적에 보존 원본지도. 하나의 큰 번들을 살펴 보는 대신 생성 된 소스 코드를 보는 것이 더 쉽습니다.

일렉트론 앱에서 일렉트론은 노드와 동일한 방법으로 require()으로 CommonJS 구현을 정의하므로 JS 파일을 함께 묶을 필요가 없습니다. 나는 여전히 뜨거운 재로드와 같은 기능을 위해 Webpack을 사용하고 싶지만 파일을 함께 묶어서는 안된다.

그래서 Webpack에게 파일을 묶지 말고 파일 이름을 보존하겠습니까?

출처

2016-06-16 ide

다른 빌드 도구를 사용하거나 엄격하게 Webpack을 사용할 수 있습니까? Gulp를 사용하여 파일을 복사하는 작업 하나와 Webpack을 사용하여 번들을 만드는 작업을 정의하는 것이 더 간단 할 수 있습니다. https://webpack.github.io/docs/usage-with-gulp.html –

내 답변이 유스 케이스에 맞습니까? – Mobius

문제가 해결되면 대답을 받아 들여야하며, 그렇지 않은 이유에 대해 의견을 말하십시오. 나는 @ jared-dykstra와 나의 대답 모두 당신을 위해 일해야한다고 생각합니다. – Mobius

webpack의 기본 작업은 자바 스크립트를 번들링하는 것이므로 별도의 파일을 유지하려면 gulp을 사용하여 주석에 제안 된대로 파일을 복사해야합니다. 그러나 webpack은 서버에서 require 일 수있는 commonjs2 번들을 생성 할 수 있습니다. 웹팩 구성에서 변형, css modules 또는 기타 webpack과 같은 기능을 노드가 기본적으로 이해하지 못하는 기능을 사용하는 경우이 기능을 사용하려고합니다.

이 기능을 사용하려면 서버용과 클라이언트 용의 두 가지 웹팩 구성이 필요합니다. Webpack에서는 객체 대신 배열을 내보내는 방법으로이 작업을 수행합니다. 예를 들어

var serverConfig = { 
    entry : './source/entry-point', 
    output : { 
     path: './webpack-output-for-server/', 
     library: 'your-app-name', 
     libraryTarget: 'commonjs2', 
     filename: 'your-app-name.js' 
    }, 
    module : { 
     ... 
    } 
}; 

var browserConfig = { 
    entry : './source/entry-point', 
    output : { 
     path: './public/', 
     filename: 'bundle.js' 
    }, 
    module : { 
     ... 
    } 
}; 

module.exports = [ 
    serverConfig, 
    browserConfig, 
];

응용 프로그램의 두 복사본이 하나가 브라우저에 번들로 제공 될이가 출력하지만, 다른 하나는 독립적 인 commonjs2 모듈로 번들로 제공됩니다 노드에서 사용할 수있는 . 필자는 Electron과 함께 사용하려고 시도한 적이 없지만 아마 작동 할 것입니다.

출처

2016-11-01 14:03:11 Mobius

Mobius가 제공 한 답변에 아무런 문제가 없습니다. 그러나 https://github.com/RickWong/react-isomorphic-starterkit을 포함하여 GitHub에서 제공되는 인기있는 템플릿 프로젝트를 살펴 보는 것이 좋습니다.이 템플릿은 매우 인기가 있으며 많은 활동을합니다.

웹팩 구성은 configs 폴더에 있습니다. 그들이 행한 것은 두 개의 폴더에 두 개의 별도의 구성을 만드는 것입니다, 그들은 클라이언트 및 서버 스크립트 번들 외에도 다른 풍부한를 찾을 수 있습니다

"scripts": { 
    "start": "forever --minUptime 1000 --spinSleepTime 1000 -c \"node --harmony\" ./dist/server.js", 
    "build-server": "webpack --colors --display-error-details --config configs/webpack.server.js", 
    "build-client": "webpack --colors --display-error-details --config configs/webpack.client.js", 
    "build": "concurrently \"npm run build-server\" \"npm run build-client\"", 
    "watch-server": "webpack --watch --verbose --colors --display-error-details --config configs/webpack.server-watch.js", 
    "watch-server-start": "node node_modules/just-wait --pattern \"dist/*.js\" && npm run start", 
    "watch-client": "webpack-dev-server --config configs/webpack.client-watch.js", 
    "watch": "concurrently --kill-others \"npm run watch-server-start\" \"npm run watch-server\" \"npm run watch-client\"" 
}

package.json에 정의 된 스크립트를 통해 동시에 내장되어 있습니다 개발에 실제로 도움이되는이 템플릿의 기능. 주요 스크립트는 개발 서버를 실행하여 변경 사항을 볼 수 있도록 npm run watch입니다.

출처

2016-11-02 00:34:44

JS 파일을 함께 묶지 않는 Webpack 구성

답변

관련 문제