기존 PHP 프로젝트 와 그 부트스트랩을 사용하지 않는,어떤 프런트 엔드 framework.
내가 노력하고 사용하는 웹팩 모듈 번들러를 만들기 위해서는 단점에 대한 나의 자원 프로젝트 관리 js 종속성으로 노드 js 패키지 관리자,실행한 작업으로 축 js css,이미지 크기를 다시...etc. 고 개선하는 브라우저 로드하는 데 필요한 시간을 로드하는 단일 페이지를 참조하십시오.
에 걸쳐 온 나의 웹팩 튜토리얼을하고있어 그것을 설치하고 설치하는 개발-서버,하지만 문제는 내가 이해할 수 없어 내가 어떻게 변환 모든 현재의 내 js 스크립트와 css 링크에서 프로젝트(내가 많은 jquery 및 CSS 라이브러리를 제공하는 데 사용되는 여러 기능에서 프로젝트)에 사용하는 웹팩.
내가 다시 작성한 모든 내 JS 및 CSS 파일에서는 방법에 맞는 웹팩? 어떻게 성공적으로 마이그레이션?
외에,나를 실행할 수 없 현재 php 응용 프로그램에서는 웹팩 개발-서버는 그것을 실행하기 위한 것으로,거기에서 첫 번째 장소는? 그것만이 디렉토리 목록에서 프로젝트의합니다.
가 테스트를 만들었index.js
파일을 사용 다음 웹팩 configuration:
var path = require('path');
var webpack = require('webpack');
module.exports =
{
entry: [
'./public/js/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080'
],
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
path: path.join(__dirname, "public/dist/js"),
publicPath : "http://localhost:8080/my_proj/public/dist/js",
filename: "bundle.js"
}
};
추가했bundle.js
내 스크립트를 부여 테스트를 위해 다음과 같이 희망하는 응용 프로그램에서 실행됩 웹팩 개발-server:
<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>
주시기 바랍 이해하는 데 도움이 되는 개념을 여기에는 방법이 성공적으로 마이그레이션?
DisclaimerI'll 만에 작은 부분의 질문입니다. 그것의 범위는 단지 방법이 너무 광범위하게 확인할 수 있게 되었습니다.단지 하나의 유래 대답이다. 나는 것만으로 터치에 설정의 개발 및 생산 환경에 대한 웹팩 묶는 당신의 첫 번째 JavaScript 을 제공해야 하는 당신은 기반에 구축 할 수 있습니다. 나는'll 도 언급 몇 가지를 추가할 수 있습과 링크에 따르면 리소스를 통해 읽. 그래서,그's 이동합니다.
이 있을 것 같은데요 Node.js 과 고궁의 시스템에 설치된 대략을 사용하는 방법을 알고있다.
또한이 있다고 가정하고웹팩
그리고웹팩 cli
으로 설치(dev)종속성의 프로젝트(단지 세계적으로):
npm install --save-dev webpack webpack-cli
업데이트:이전 버전의 이 대답하지 않았을 필요로 설치하는
웹팩 cli
. 로 버전 4(월 2018),웹팩's CLI 에 있는 그것의 자신의 패키지로,따라서 필요한 추가 패키지입니다.정 개발 및 생산의 워크플로
당신은 일반적으로 원하는 작업들을 하에서 다른 개발에서 보다 생산(축소함으로써 생산,라이브 전문가로 개발,...) 그것을 달성하기 위해,우리는'll 분할하려는 우리의 구성 파일이 있습니다.
준비하는 디렉토리 구조를
Let's 에 동의하시는 웹팩 config 에서 당신의 질문입니다. 우리는'll 시작하는 모든 통해,우리는'd 를 변경해야의 거의 모든 어쨌든. 첫째,만들기
build
폴더 안에 당신의 프로젝트 루트입니다. 빌드 관련 물건을 것이다 거기에 갈 때문에,우리는'하고 오염의 프로젝트를's 루트 폴더 config 파일이 있습니다. (당신이'다시 무료로 이 폴더의 이름을 다르게 하지만,추적하는 동안 이습니다.) 만들기config.base.js 고
,config.production.js
및config.development.js
파일 내부에는 폴더에 있습니다. 좋은,우리는 config 파일에 대한 두 개의 빌드 체인 지금입니다. 구성이 여전히 비어 있지만,그래서 그's 는 이제 그들과 함께 몇 가지 기본적인 논리입니다.치 웹팩 병합`
하지만 먼저,우리는'll 을 설치할 필요가
웹팩 병합
.
npm install --save-dev webpack-merge
이 패키지에는 디버깅 심볼이 들어 있습이 우리를 깊게 병합하는 여러 웹팩 구성이 있습니다. 우리는 그것을 사용하고 싶을 만드는 웹팩 구성에 따라 우리의 현재 환경입니다.
지금 조build/config.base.js
:
module.exports = {
// We'll place webpack configuration for all environments here
}
이 파일은 분명히 내보내기 빈 개체 지금,하지만 우리는'해야는 다음과 같은 단계가 있습니다.
이 코드build/config.production.js
:
const merge = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'production'
// We'll place webpack configuration for production environment here
})
과 거의 동일 코드로 당신의build/config.development.js
:
const merge = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'development',
watch: true
// All webpack configuration for development environment will go here
})
I guess it's pretty 직관적이 무엇:
사용하는 웹팩 가진config.development.js
구성이 가져오는 일반 구성 및 병합 그것의 자신의 구성 선언합니다.
업데이트:의
모드
옵션에서 위의 설정 파일에 추가되었 웹팩 4(제 2018). 그것은 세트무리가 합리적인 기본개발 및 생산을 위한 번들. 지금 프로세스를 실행하는 다음과 같이 보일 것입니다에서 명령 라인:
npx webpack --config build/config.development.js
# If the above doesn't work, you probably have an older version of npm (< 5.1) installed
# While npx is a really great tool, you can of course still call the path of the webpack executable manually:
node_modules/.bin/webpack --config build/config.development.js
고 그 반대의 경우도 마찬가지입니다에 대한생산
환경이다.
는 명령은 오히려 어설픈 사용하지만 걱정 없이,우리는'll 주소입니다.
한 정보가 있습니다 우리는'll 할 수 있도록 집중 그들을 쉽게 교환할 수 있습니다. 파일의 경로 같은 것입니다. 그래서 그's 추출물니다.
만들기paths.js 에서
당신의build
폴더에 있는 그것 내보내기로 우리는'll 고 싶은 나중에 사용:
const path = require('path')
// I'm really just guessing your project's folder structure from reading your question,
// you might want to adjust this whole section
module.exports = {
// The base path of your source files, especially of your index.js
SRC: path.resolve(__dirname, '..', 'public'),
// The path to put the generated bundle(s)
DIST: path.resolve(__dirname, '..', 'public', 'dist'),
/*
This is your public path.
If you're running your app at http://example.com and I got your DIST folder right,
it'll simply be "/dist".
But if you're running it locally at http://localhost/my/app, it will be "/my/app/dist".
That means you should probably *not* hardcode that path here but write it to a
machine-related config file. (If you don't already have something like that,
google for "dotenv" or something similar.)
*/
ASSETS: '/dist'
}
위에서 언급했듯이,우리가 수 있는 기술적으로 우리의 실행 빌드 체인에서는개발
모드는 다음과 같다:
npx webpack --config build/config.development.js
는's 는 불 자세한 정보는 명령하지만,그래서 그's 용하기 때문입니다.
It's 방법으로 실행하는 것이 더 편리 빌드 프로세스를 통해본원
스크립트가 있습니다. 하나를 추가하는 스크립트별 환경의패키지입니다.json
다음과 같다:
{
"scripts": {
"dev": "webpack --config build/config.development.js",
"prod": "webpack --config build/config.production.js"
}
}
지금 실행할 수 있습니다 당신의 빌드 체인을 가진npm 실행 dev
resp.npm 실행 prod
–는 훨씬 쉽게 기억하고 빠르게하는 유형입니다.
...우리는'es 아무것도 구축,물론입니다.
그래,그건이었고 실제로 상당한 양의 작동하지 않고 달성하기 너무 많은 지금까지. 그래서 그's 시작으로가 더 흥미로운 무언가:우리는'll 정의한 자바 스크립트 엔트리 포인트이다.
다음 코드build/config.base.js
제품(전적으로 기존 코드):
const path = require('path')
const { SRC, DIST, ASSETS } = require('./paths')
module.exports = {
entry: {
scripts: path.resolve(SRC, 'js', 'index.js')
},
output: {
// Put all the bundled stuff in your dist folder
path: DIST,
// Our single entry point from above will be named "scripts.js"
filename: '[name].js',
// The output path as seen from the domain we're visiting in the browser
publicPath: ASSETS
}
}
위 구성에서 기대하는index.js
에 살고 있는SRC/js
폴더(에 정의된 대로build/paths.js
).
Let's 생성하는 파일은 다음과 같은 내용:
import './jquery.min.js'
import './jquery.migrate.js'
import './jquery.bxslider.min.js'
import './jquery.appear.js'
import './jquery.countTo.js'
import './bootstrap.js'
당신이 볼 수 있듯이,index.js
가져오는 모든 파일을 사용하고 싶습니다.
는 경우 지금 실행
npm run prod
에서 당신의 터미널scripts.js
파일에서 만든DIST
폴더에 있습니다. 을 포함할 수 있다는 당신의 마크업은 일반 ol'<스크립트>
태그입니다.
축하합니다,당신은 당've got 작동하는 웹팩 설치!!
이 mini-자습서 정말 그냥의 표면을 긁어과 함께 무엇을 할 수 있는 웹팩. 그것은 당신에게 매우 견고한 기초를 구성하는 당신은 지금으로 채울 수 있습니다 당신이 무엇을 필요합니다. 과하는 것입니다 실제로 아주 많은 물건입니다. 나는'll 목록 몇 가지 추가할 수 있습 강화,일부 링크입니다.
을 사용하려는 경우 웹팩 될 수 있고,이렇게 하기 위하여 열심히지 않는 경우't 에 대해 알고 그것의 근본적인 개념입니다. [Juho 벱스카야äläinen](https://github.com/bebraw 서)를 만들 훌륭한 가이드에 시작된 웹팩는 나에게 훨씬 도움이. 그는's 한 웹팩 핵심 기여할 수 있도록 확인하는 그 무엇을 알고 그는's 니다. 특히더개념은 당신이'll 정말필알고 있습니다. 의 많은에 대한 힌트를 이 목록은 설명한다. 자세히보기:SurviveJS–웹팩 튜토리얼
그것은 이름이 무엇's 말하는 것을 원하지 않을 수도 있습 팩 모든 자바스크립트로 하나의 부피가 큰 출력 파일입니다. It's 작업등을 위해 당신을 분리 부품의 번들는 당신은 단지에서 필요한 특정 페이지의 응용 프로그램입니다. 또한,방법에 따라 자주 당신이'다시 작업에서 귀하의 프로젝트를's 자바스크립트,그것은 좋은 생각이 있을 수도 분리하는 타사 코드 번들 캐싱을 위한 목적입니다. 자세히보기:웹팩 문서 코드를 분
할 수 있습을 강화하려는 귀하의 사이트는's 캐싱 행위를 추가하여 해시의 번들로 파일명에 달려 있는 콘텐츠를 보호할 수 있습니다. 을 만들 것입니다(예를 들면)script.31aa1d3cad014475a618.js
대신scripts.js
.
는 파일을 수 있습 캐시 무한하기 때문에 한 빨리 그 내용이 변경,파일 이름을 변경됩니다.
PHP 코드는 다음 사용하고웹팩-manifest-플러그인 액세스를 생성된 파일 이름입니다. 더 읽기: *[변경할 수 없 캐시](https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/)하는 방법에 대 캐시 번들원 *[웹팩 문서–
chunkhash](https://webpack.js.org/configuration/output/#output-filename 에)어떻게 풍요롭게 첫 번째 파일은 이름으로 해시 *[
웹팩-manifest-플러그인은](https://github.com/danethurber/webpack-manifest-plugin 에)어떻게 생성하는
manifest.json`을 포함하는 파일의 이름은 현재의 번들
에 사용 할 경우 현대 ES2015 코드 사이트에서's JavaScript(고 대상으로 비 상록 브라우저),you'll 고 싶 transpile 그들이 아래로 일반 ES5. (경우에는 장기"ES2015"어떤 의미를 만들지 않는 당신,당신이'다시 대부분이 그것을 사용하지 않고 이를 무시할 수 있습니다.)
자세히보기:babel 로더
–loader 실행하는 바벨에서 스크립트
가 있는 웹팩 로더 CSS. 과에서 시작되었다. 고 PostCSS. 당신이 무엇을 필요합니다.
그리고 이후 당신이'다시 아마 하지 계획을 포함 CSS 을 통해<스크립트>
태그를 알고 얻을 추출물플러그인 텍스트를 생성하는 실제.css
파일이 있습니다.
**업데이트:**를 추출한 텍스트 플러그인매우 설정됩니다. 그러나,그's 제의 종류는 해킹:이 생성하는
.css
파일에도 하지만 웹팩만 알고 있으로 자바 스크립트를 대상 언어입니다.그러나 이것은 더 이상 참으로의 웹팩 4. 이's 제 시스템을 정의하는 임의의 모듈을 포함하여,타 CSS.
Long story short:기대 기본 CSS 에서 지원하는 웹팩 대체텍스트를 추출 플러그시간이 빨리.
힌트:로
나는'll 언급이기 때문에 이것은 실제 고통점을 위해 나를 때까지 실현하는 방법등을 작동 여기: 알고 있어야 하는 웹팩 인식의
url(...)
문을 해결하기 위해 시도하는 상대를 소스 파일을*. 이 방법은,당신의 소스 파일 공유/css/습니다.css`:
body {
background: url('../img/bg.jpg');
}
의 경우 출력 경로는공개/dist/css/bundle.css
,로 변환됩니다:
body {
background: url('../../img/bg.jpg');
}
더 읽기:
[스타일-로더](https://www.npmjs.com/package/style-loader 고)css 로더–you'll 손 필요합니다.
추출물 텍스트-웹팩인
업데이트:기 때문 웹팩 4 월에 발표하는 2018 년,이 섹션은 오히려 사용되지 않습니다. 설정하는 새로운
모드
옵션을"production"
이 자동적으로 적용 JavaScript 최소화. 가 있Terser플러그인에 대한 웹팩을 작게 JavaScript. 축소함으로써 CSS 는 이미 기능을 내장하여css 로더
플러그인은 위에서 언급된다. 자세히보기:Terser 웹팩 플러그인이미지 최적화
웹팩은 번들러 아이 주자입니다. 따라서,이미지 최적화되지 않은 진정한 웹팩 작업입니다. You'd 은 아마 더 나을 것을 사용하여 실제 작업을 주거나 일부를 정의하
본원
스크립트이다. 이 의미하지 않는 웹팩 할 수 없습니다. 가 있는 플러그인에 대한 거의 모든 것을. 더 읽기: imagemin할 수 있는 작게는 이미지에서 모든 내용을 설명한다. imagemin-웹팩-플러그인니다 통합하는 프로세스로 귀하의 웹팩 구축 chain.라이브 다시 로드
문제와 라이브로 다시 로드해야는 아주 간단한 원인:웹팩 dev server 은 단순한 Node.js 제공하는 서버 정적 파일이 있습니다. 당신이'다시는 경우,
등-개발-서버에
아마 잘못 도구다. 려고웹팩-livereload-플러그인"대신에"라이브 reloader 할 수 있는 포함해
<스크립트>태그입니다. 자세히보기:[
웹팩-livereload-플러그인은`](https://www.npmjs.com/package/webpack-livereload-plugin)원본 맵
업데이트:로의 웹팩 4(월에 출시 2018),원본을 지도할 때 자동으로 생성되는 새로운
모드
옵션을 설정하면"development"`입니다. 여 모든 수단을 사용하여 소스 지도. 그들이'll 와 함께 작업하기 위해 뭉치 너무 쉽게 당신이'll 울고 싶어. 자세히보기:웹팩 문서–소 맵가장자리 사례
일반적으로 귀하의 모든 기존 스크립트를'll 프로세스등을 실행해야 합니다. 유일한 예외는 내 마음에 오른 것에 대한 글로벌 entities. 다음과 같은 코드:
function myFunc () {
console.log('I exist!')
}
이 코드를 일반 자바 스크립트 파일을 만들 것다
어디에서나 사용할 수 있의 JS 코드입니다. 하지만 이 웹팩 코드 번들이 감싸는 내부의 콜백 함수(고 따라서 떠나 글로벌 범위),이't 에 대한 액세스하는 기능을 더 이상입니다.
타사 라이브러리의 문제가 되지 않는가,그들은 일반적으로 할당들이 전역 변수 하는창의
객체를 직접하지만,당신이've 이미 작성 JS 코드에서는 프로젝트에서,당신이 알고 있어야 합니다.
npm 실행 prod
자식을 통해 전에 후크를 밀어/후 당. 이게 도움이 되었으면 좋겠습니다.
기반으로 기존 vue-템플릿 및 그 대답에서@Loilo 내가 만들어 vue 템플릿이 설치할 수 있으로vue-cli
. 이 템플릿 밀어서 시동을 건을 위해 당신 vue 응용 프로그램을 확장할 수 있습니다거나 통합에서 당신은 기존의 환경입니다.
npm install -g vue-cli
vue init delcon/webpack-simple my-project
cd my-project
npm install
devwatch:
이 템플릿은 추가 실행 devwatch 는 옵션을 시계 부 파일 변경 내용이 대신 사용하는 웹팩-개발-서버입니다. 이것은 사용 가능한 모든 기존 웹서버는 환경이다.
npm run devwatch
dev:
그것을 실행하는 기본등-개발-서버 제거<script src="http://localhost:35729/livereload.js"></스크립트>
에서index.html
:
npm run dev
를 구축:
를 구축하는 프로젝트를 위해 생산:
npm run build