기존 PHP 와 JS 항목에 webpack 을 사용합니다

나는 jquery 와 bootstrap 의 기존 PHP 프로젝트를 가지고 있으며, 전단의 프레임은 사용하지 않았다.

나는 webpack 모듈 bundler 내 프로젝트 자원을 위한 입구점을 사용하여 node js package manager 관리js 의존사항을 사용하여 minify js css css, image re size 등 방식으로 작업할 작업을 실행하고 단일 페이지에 필요한 브라우저를 추가하기 위한 시간을 적용합니다.

나는 Webpack 교정을 만났고, 나는 그것을 설치해야 하는 dev 서버를 설치할 수 있지만, 항목의 모든 js 스크립트와 cs링크 (나는 많은 jquerry, cs라이브러리가 프로젝트 중 여러 기능을 제공하는 데 사용된 웹팩으로 바꾸는 것이다.

나의 모든 JS 와 CSS 파일을 다시 써야 합니까?어떻게 이전에 성공합니까?

이 밖에 webpack dev 서버에서 현재 php 응용 프로그램을 실행할 수 없습니다.

우선 거기서 실행해야 합니까?그것은 단지 항목의 목록을 동시에 열거할 뿐이다.

나는 이미 test index.js 파일을 만들었고 다음 Web 가방 설정을 사용했습니다:

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 를 스크립트에 추가할 때 다음 테스트를 하기 위해서 프로그램이 웹pack dev 서버에서 실행할 수 있기를 희망합니다:

이곳의 개념을 이해하고 어떻게 성공적으로 이 이전을 진행할 수 있습니까?

대답

우선 당신의 작은 질문에 대답합니다:

• No, you're not supposed to run your PHP application through a webpack dev server. Explained in the Live Reloading section below.
• No, you won't have to rewrite your assets. Probably. See the CSS and Edge Cases sections below.

---

면책 성명: 나는 너의 문제의 일부만을 받아들일 뿐이다.

그것은 범위가 너무 넓어서 스텝Overflow만이 포함될 수 없다.

저는 연락만 해요.

• setting up a development and a production environment for webpack
• bundling your first JavaScript

이것은 너에게 기초를 하나 주어야 한다.

나는 또 몇 가지 물건을 언급할 것이니, 당신은 자원에 따라 읽으려 할 것이다.

그러니까 우리 갑시다.

요구

나는 당신의 기계에 Node.js 와 npm 를 설치하였다고 가정하고, 그것들을 어떻게 사용할지 대체로 알고 있습니다.

Webpack과 webpack cli 를 프로젝트로 설치한 (dev) 의존사항을 가정합니다.

npm install --save-dev webpack webpack-cli 

Update: Earlier versions of this answer did not require installing webpack-cli. As of version 4 (February 2018), webpack's CLI resides in its own package, hence the additional required package.

개발 및 생산 작업 흐름을 설정하다

당신은 일반적으로 개발에서 하는 일을 생산에서 하는 것과 달리 (생산에서 최소화하고 개발에서 실시간으로 재재가해 주시기 바랍니다.

)

이 점을 실현하기 위해서 우리는 우리의 프로필 분할을 필요로 한다.

디렉터리 구조 준비

우리는 당신의 문제의 webpack 설정을 무시하는 것에 동의합니다.

우리는 처음부터 처음부터, 어쨌든 우리는 거의 모든 것을 바꾸어야 한다.

우선 프로젝트 루트 디렉토리에 폴더를 생성합니다.

파일 오염 프로젝트의 루트 폴더를 설정하고 싶지 않기 때문이다.

(다른 이름으로 이 폴더를 명명할 수 있으나, 이 교정에서 추적해 주십시오.)

이 폴더에서 config.base.js, config.production.js, config.development.js 파일을 생성합니다.

좋아, 우리는 지금 두 개의 체인 설정 파일이 있다.

하지만 설정은 여전히 비어 있기 때문에 기본적인 논리로 채워 달라는 것이다.

홈페이지 패키지 설치

하지만 우선 webpack merge 를 설치해야 합니다.

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 }) 

나는 이것이 매우 직관적이라고 생각한다.

webpack 은 config.development.js 설정을 사용하여 공유 설정을 합쳐줍니다.

Update: The mode option in the above config files was added in webpack 4 (released February 2018). It sets a bunch of sensible defaults for development and production bundles.

현재 명령에서 이 프로세스를 실행하는 것과 같습니다:

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 

생산 환경도 그렇다.

이 명령은 사용하기에 상당히 서투르지만 걱정하지 마세요. 우리는 잠시 후에 이 문제를 해결할 것입니다.

조수 파일을 제작하다

우리는 이 정보를 집중해서 교환하기를 바란다.

파일 경로가 이렇다.

그래서 그것들을 추출하라고 합니다.

폴더 생성 폴더에서 paths.js 를 생성하고, 잠시 후에 사용할 경로를 내보내기:

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 

그러나 이것은 불안한 장황한 명령이기 때문에 고쳐 달라는 것이다.

npm 스크립트를 통해 구축 과정이 더욱 편리하다.

package.json 에서 모든 환경에 스크립트를 추가하여 다음과 같습니다:

{ "scripts": { "dev": "webpack --config build/config.development.js", "prod": "webpack --config build/config.production.js" } } 

현재 npm run dev resp 실행 체인을 사용할 수 있습니다.

npm run prod——기억도 쉽고 타자도 빨라요.

… 물론이고, 무엇이 있으면 지어야 한다.

자바스크립트 묶기

그래, 그것은 실제로는 상당히 많은 일이고, 지금까지 많은 성과를 거두지 못했다.

그래서 더 신나는 일부터 자바스크립트 입구를 정의합니다.

입구점 정의

다음 코드를 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 중 정의) 를 설정합니다.

다음 내용을 포함한 파일을 만들기:

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 

단말기에서 DIST 폴더에서 scripts.js 파일을 생성합니다.

간단한 ol '< script > 표시를 표시할 수 있습니다.

축하해, 너 일 하는 홈페이지 설치!

깊게 잠기다

이 작은 교정은 정말 네가 할 수 있는 웹 가방의 표면을 지웠을 뿐이다.

이것은 당신의 프로필을 위해 매우 튼튼한 기초를 제공합니다.

현재 필요한 물건으로 충전할 수 있습니다.

그것은 많은 물건이 될 것이다.

나는 네가 강화할 수 있는 것을 목록하고 읽을 수 있는 링크를 제공할 것이다.

홈페이지 가방 개념

Webpack을 사용하려면 기본적인 개념을 모르신다면 이를 하기 어렵습니다.

Juho veps(혼식)은 webpack 을 사용하기 위해 좋은 지침을 만드는데 도움이 됩니다.

그도 홈페이지 가방의 핵심 공헌자이기 때문에 그가 무슨 말을 하는지 알 수 있다.

특히 적재기는 개념이다.

너는 정말 알아야 한다.

목록의 많은 힌트도 여기에서 해석한다.

survivejs - webpack 교정

코드 분해

그 이름을 이렇게 말하자면: 당신은 모든 자바스크립트를 엄청난 출력 파일로 포장하고 싶지 않을 수도 있습니다.

이것은 홈페이지 가방이 당신의 일을 위해 당신의 묶음포를 분할할 수 있는 일부입니다.

당신은 당신의 응용 프로그램의 일부 페이지에 있는 부분만 필요합니다.

또한 프로젝트 자바스크립트의 주파수에 따라 제 3자 코드를 가방에서 분리해서 캐시를 사용한 것이 좋은 생각이다.

웹 가방 문서-코드 분해

캐시

파일을 묶는 이름에 분열해서 플랫폼의 캐시 행위를 추가하여 배열하기를 희망합니다.

script.31a1a1d3cad014475a618.js

그리고 이 파일을 무한히 캐시 할 수 있습니다.

그 내용이 변경되면 파일 이름도 변경될 것입니다.

그리고 PHP 코드 (Webpack manifest 플러그인을 사용하여 생성된 파일 이름을 찾을 수 있습니다.

읽기:

• Immutable Caching on how to cache your bundles forever
• webpack Documentation – chunkhash on how to enrich your bundle file names with hashes
• webpack-manifest-plugin on how to generate a manifest.json containing the file names of your current bundle

책을 펴다

만약 사이트의 자바스크립트에서 현대 ES2015 코드를 사용하고 싶다면 일반 ES5 로 바꾸어야 합니다.

(ES2015"라는 단어가 당신에게 아무런 의미가 없다면, 그것을 사용하지 않을 수 있어 이 단락을 무시할 수 있다.

읽기: babel loader — 스크립트에서 babel 다운로드 프로그램을 실행합니다

CSS

CSSS에 사용할 웹팩 다운로드 프로그램이 있습니다.

그리고 사스.그리고 우정.무엇이 필요하든.

또한 < script > 태그를 통해 CSSSSSSS를 포함하지 않기 때문에 텍스트 플러그인을 실제 CSS 파일로 생성할 수 있습니다.

Update: The Extract Text Plugin is very established. However, it's actually a kind of hack: It generates .css files even though webpack only knows JavaScript as its target language.

However, this is no longer true as of webpack 4. There's now a system to define arbitrary module types, including CSS.

Long story short: Expect native CSS support in webpack to replace Extract Text Plugin some time soon.

Hint: Paths

나는 이 점을 언급할 것이다.

왜냐하면 내가 webpack 이 어떻게 일하는지 깨닫기 전에, 그것은 나에게 진정한 아픔이다.

webpack 이 url(…) 구문을 인식하고 원본 파일에 상대적으로 분석해 보십시오.

원본 파일 public/css/main.css

body { background: url('../img/bg.jpg'); } 

출력 경로가 public/dist/cs/bundle.css 로 변환됩니다:

body { background: url('../../img/bg.jpg'); } 

읽기:

• style-loader and css-loader – you'll hands down need those.
• extract-text-webpack-plugin

축소하다

Update: Since webpack 4 was released in February 2018, this section is rather obsolete. Setting the new mode option to "production" now automatically applies JavaScript minification.

Webpack에는 자바스크립트를 줄이기 위한 Terser 플러그인이 있습니다.

CSSS를 줄이는 것은 위에서 언급한 CSS 플러그인 내부의 특성이다.

Terser webpack 플러그인

영상 최적화

미션 운행기가 아니라 웹팩은 바인더 입니다.

그래서 이미지 최적화는 진정한 홈페이지 가방 작업이 아니다.

실제 작업 실행기를 사용하거나 npm 스크립트를 정의하는 것이 좋습니다.

webpack 이 이렇게 할 수 없다는 의미는 아니다.

거의 모든 것이 플러그인이 있다.

읽기:

• imagemin can minify images pretty nicely on its own.
• imagemin-webpack-plugin will integrate that process into your webpack build chain.

실시간 재활용

실시간으로 재재가하는 문제는 간단한 원인: webpack dev 서버는 단순한 Node.js 서버에서 정적 파일만 제공합니다.

당신에겐 webpack dev server 가 잘못된 도구일 수도 있습니다.

웹팩 livereload 플러그인이 아니라 실시간 재로드 프로그램을 사용하면 < script > 태그를 통해 포함할 수 있습니다.

webpack livereload 플러그인

원본 지도

Update: As of webpack 4 (released in February 2018), source maps are automatically generated when the new mode option is set to "development".

어쨌거나 원본 맵을 사용하다.

그들은 너의 일을 더욱 쉬워할 것이다.

너는 울고 싶을 것이다.

웹 가방 문서-원본 지도

가장자리

일반적으로 Webpack을 사용하여 처리하는 모든 스크립트가 잘 실행되어야 합니다.

나는 지금 유일하게 생각한 예외는 세계 실체에 관한 것이다.

아래의 코드 보십시오:

function myFunc () { console.log('I exist!') } 

일반 자바스크립트 파일의 코드가 JS 코드에서 사용할 수 있습니다.

그러나 웹팩 묶음 패키지 코드가 조정함수에 포장되어 있는 중 (전역 범위) 에 대한 방문은 더 이상 없을 것이다.

제3자 라이브러리는 하나의 문제일 수 없습니다.

일반적으로 전체 함수를 창 대상에 배정하지만, 만약 종목에서 JS 코드를 작성했다면 이 점을 알아야 합니다.

자동화!

당신은 가능한 한 많은 자동으로 당신의 작업 흐름을 자동화할 필요가 있습니다.

밀고 당기기 전에 git 갈고리를 통해 npm run prod 를 운영할 것을 고려합니다.

---

도움이 되기를 바랍니다.