쉽게 배우는 Webpack

쉽게 배우는 Webpack

(18개의 수강평)

739명의 수강생

38,500원

장기효(캡틴판교)
평생
초급
51개 수업, 총 3시간 31분
위시리스트 추가
jaiyah 프로필

참고 강의를 찾지 못하겠습니다. jaiyah 21일 전

해당 무료강의 찾아도 없는 것 같습니다.

없어진건가요? 아니면 제가 찾지 못한건지..

좌표 좀 부탁드립니다

1
Yu Jae Seung 프로필

webpack 개발환경과 빌드, 배포, 실서버 적용에 관해서.. Yu Jae Seung 4달 전

이 섹션에 맞지 않는 질문일 수 있지만, 마땅히 질의를 할만한 곳을 찾지 못해

이렇게 질의를 남기게 되었습니다.

사실 웹개발 환경이 아직 익숙하지 않은 상태에서 vue.js 강좌와 webpack 강좌까지

들여다보고 있습니다. 그래서 아직 제대로 이해가 안되는 초보적인 질문일 수 있으니 양해바랍니다.

현재 vue-cli 3버전대로 테스트를 하고 있습니다.

알기로는 vue-cli를 이용하면 내부적으로 webpack이 적용되어 build 명령어를 주게 되면

/dist 폴더에 번들링 된 파일들이 생성되는 것을 확인했습니다.

cli에서 제공되는 serve 명령어로 개발서버를 돌려서 테스트 해보고 있는데,

실제 운영서버에는 번들링 된 파일(index.html 이하 번들링 된 파일들..)을

업로드하여 서버구동을 하는 절차가 맞는건지요?

그냥 npm run serve(vue-cli-service serve) 로 돌아가고 있는 서버를 그냥 실제 서비스에 적용하는 것으로 생각하고 있었는데 아닌거 같아서요.. ㅎㅎ;

위의 개발환경은 말그대로 개발용으로만 돌리는 서버환경이라고 생각하는게 맞는건지 궁금합니다.

두서없는 질의 죄송합니다..^^

1
하늬파람 프로필

webpack 4에서 webpack.config.js의 설정 변경이 필요한 것 같습니다. 하늬파람 6달 전

아래처럼 설정을 해야 한다고

https://webpack.js.org/concepts/loaders/#configuration

에 나와 있네요.

use: [

{ loader: 'style-loader' },

{

loader: 'css-loader',

options: {

modules: true

}

},

]

1
양기훈 프로필

splitChunks를 사용해도 에러가 납니다. webpack.config.js 전체 코드가 어떻게 되나요? 양기훈 8달 전

0
양기훈 프로필

webpack app/index.js dist/bundle.js 입력시 ERROR in multi ./app/index.js dist/bundle.js 양기훈 8달 전

  1. webpack app/index.js dist/bundle.js 입력시 ERROR in multi ./app/index.js dist/bundle.js

    webpack app/index.js --output dist/bundle.js --mode development

대쉬가 두개 임...

0
슈퍼장 프로필

프로덕션 빌드시 NODE_ENV 정의 슈퍼장 9달 전

위 강의에서 사용된 webpack.config.js 에 보면 아래와 같이

production 빌드일 경우에 env를 다시 production 으로 잡아주는데 이미 프로덕션 조건을 타고 들어왔는데 또 production으로 잡아주는건 용도가 다른건가요??

if (process.env.NODE_ENV === 'production') {

module.exports.devtool = '#source-map'

module.exports.plugins = (module.exports.plugins || []).concat([

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}

})

])

}

0
오병권 프로필

ExtractTextPlugin 오류 오병권 10달 전

[package.json]

"devDependencies": {

"autoprefixer": "^9.1.5",

"babel-core": "6.24.1",

"babel-eslint": "7.2.3",

"babel-loader": "7.1.1",

"babel-preset-es2015": "6.24.1",

"bootstrap-loader": "^3.0.1",

"bootstrap-sass": "^3.3.7",

"clean-webpack-plugin": "^0.1.19",

"css-loader": "^1.0.0",

"extract-text-webpack-plugin": "^4.0.0-beta.0",

"file-loader": "^2.0.0",

"jquery": "^3.3.1",

"node-sass": "^4.9.3",

"postcss-loader": "^3.0.0",

"raw-loader": "^0.5.1",

"resolve-url-loader": "^3.0.0",

"sass-loader": "^7.1.0",

"style-loader": "^0.23.0",

"url-loader": "^1.1.1",

"webpack": "3.12.0",

"webpack-browser-plugin": "^1.0.20",

"webpack-dev-server": "^2.11.3",

"webpack-merge": "4.1.0",

"webpack-strip": "^0.1.0"

}

[Config]

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

use: [{

loader: 'babel-loader',

options: {

presets: [

['es2015', {modules: false}]

]

}

}]

},

{

test: /.css$/,

// use: ['style-loader', 'css-loader']

use: ExtractTextPlugin.extract({

fallback: 'style-loader',

use: 'css-loader'

})

}

]

},

plugins : [

new webpack.ProvidePlugin({

$ : "jquery",

jQuery : "jquery"

}),

    new CommonsChunkPlugin({

name: "vendor"

}),

new ExtractTextPlugin('styles.css')

]

[Error]

> gettingstarted@1.0.0 build C:\Users\bk\Desktop\ZumInternet\gettingstarted-web-master\gettingstarted-web-master

webpack --env=prod --progress --profile --colors

C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpackbinwebpack.js:348

throw err;

^

TypeError: Cannot read property 'thisCompilation' of undefined

at ExtractTextPlugin.apply (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_module

sextract-text-webpack-plugindistindex.js:183:20)

at Compiler.apply (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_modulestapable

libTapable.js:375:16)

at webpack (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpacklibwe

bpack.js:33:19)

at processOptions (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpack

binwebpack.js:335:15)

at yargs.parse (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpackbi

nwebpack.js:397:2)

at Object.Yargs.self.parse (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_module

swebpacknode_modulesyargsyargs.js:533:18)

at Object. (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_modulesweb

packbinwebpack.js:152:7)

at Module._compile (module.js:662:30)

at Object.Module._extensions..js (module.js:673:10)

at Module.load (module.js:575:32)

at tryModuleLoad (module.js:515:12)

at Function.Module._load (module.js:507:3)

at Function.Module.runMain (module.js:703:10)

at startup (bootstrap_node.js:193:16)

at bootstrap_node.js:660:3

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! gettingstarted@1.0.0 build: webpack --env=prod --progress --profile --colors

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the gettingstarted@1.0.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! C:UsersbkAppDataRoamingnpm-cache_logs2018-09-24T13_06_21_834Z-debug.log

이상한 error가 발생합니다... webpack.js에서 에러가 발생하네요...

0
오병권 프로필

BootStrap을 적용하고 싶습니다. 오병권 10달 전

css파일 js로 import하는 영상보고 작성해봤는데 적용이 안되서 질문드립니다. 혹시 외부라이브러리는 다른 설정방법이 있나요?

[HTML]

<!DOCTYPE html>

<html lang="ko">

helloworld

ID

PW

E-Mail

Cancle

[bootstrap.js]

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap';

import 'bootstrap/js/dist/util';

import 'bootstrap/js/dist/dropdown';

[config]

const webpack = require('webpack');

const path = require('path');

const webpackMerge = require('webpack-merge');

const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

const config = {

entry: {

helloworld: path.resolve(dirname, 'src/main/resources/static/js/helloworld.js'),

vendor: ['jquery'],

background: path.resolve(dirname, 'src/main/resources/templates/myStyle.css'),

bootstrap: path.resolve(dirname, 'src/main/resources/static/js/bootstrap.js')

},

output: {

path: path.resolve(dirname, 'src/main/resources/static/dist/js'),

filename: '[name].js'

},

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

use: [{

loader: 'babel-loader',

options: {

presets: [

['es2015', {modules: false}]

]

}

}]

},

{

test: /.css$/,

use: ['style-loader', 'css-loader']

}

]

},

plugins : [

new webpack.ProvidePlugin({

$ : "jquery",

jQuery : "jquery"

}),

    new CommonsChunkPlugin({

name: "vendor"

})

]

};

module.exports = function(env) {

return webpackMerge(config, require(./webpack.${env}.js))

};

0
terecal 프로필

lodash 임포트가 잘안되요 terecal 10달 전

안녕하세요 캡틴 판교님

웹팩 강좌에서 getting started 프로젝트에서 lodash 임포트하는거 모듈 설치하고

lodash npm 으로 설치한뒤 js에 임포트해서 쓰면 되는거 아닌가여 임포트 구문에서 에러가 발생해서여;

차례대로

1.C:webpack_studygetting_started>

npm i lodash –save

2.설치 확인

3.js에 임포트

import _ from ’lodash’;

4.http 서버 실행후 index.html 실행

4.아무 내용도 안출력되서 개발자 도구를 열어보니

임포트 구문에서 에러 발생 : Uncaught SyntaxError: Unexpected identifier

이런식으로 에러가 발생하는데 이유가 무엇일까여

모듈 설치는 되었는데 모듈 설치 말고 이외의 설정이 필요한가요?

0
Chang Moo Moon 프로필

안녕하세요 npm init 이후에 -y 옵션은 어떤 설정을 주는 건지 궁금합니다. Chang Moo Moon 11달 전

제가 검색을 잘 못하는지 npm init -y option, npm init -y 옵션 등등 여러 키워드로 검색해봤는데 이에 대한 정보가 안나오는데 어떤 설정을 주는 건지 궁금합니다. 감사합니다.

0
거북이가좋아 프로필

번들링을 하지 않고… 그냥 하면 왜 안될까요? 거북이가좋아 11달 전

webpack으로 번들링 하지 않고 직접

<script src="app/index.js"> 로 로딩하고

app/index.js 에 아래와 같이 작성해서

// index.js

import _ from 'lodash';

function component () {

var element = document.createElement('div');

element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}

document.body.appendChild(component());

브라우저로 index.html 을 띄우면 Hello webpack 이라는 글자가 나오지 않습니다.

크롬 개발자 도구에서 index.js 파일을 살펴보면 import _ from 'lodash'; 이부분에서

Uncaught SyntaxError: Unexpected identifier 라고 나오는데... 구문상의 애러는 없는것같은데 왜안되는지 궁금합니다.

참고로 같은 index.js 파일을 웹팩으로 번들링해서 띄우면 글자가 잘 나옵니다.

수업진행하실때 번들링을 안해도 되지만~ 이라고 하셔서.. 되야 하는데 안되서 이상합니다.
직접 npm install lodash --save 로 받아서 브라우저로 실행시키려면 어떻게 하면 되나요?

0
김우석 프로필

webpack.config.js 상단에 var webpack = require('webpack'); 은 언제 쓰실려고 가져오신건가요? 김우석 2018.07.22

상단에 var webpack = require('webpack'); 은 언제 쓰실려고 가져오신건가요?

0
Gichul Roh 프로필

Webpack 개발환경 설정 시 타 유료강의 부분을 보고 하라는건지요? Gichul Roh 2018.07.16

Webpack 개발설정 동영상에서 타 vue 강의 부분을 참고하라고 나오는데, 그 강의 또한 유료강의인데 그건 조금 아니지 않나 생각합니다.

그 다음 강의 Webpack CLI 설치를 보면 atom 환경에서 바로 cmd모드인데,

조금 건너뛴 느낌인지라 그 다음부터 들어야 하는건지 궁금합니다.

1
SuYun Lee 프로필

작성 후 webpack 실행시 에러가 나서 이렇게 처리했습니다. SuYun Lee 2018.07.11

아직 안정화가 전인가요? 안정화되면 강좌 업데이트 해주신다고했는데 아직인가봐요.

따라만 하다보면 에러가 나네요~ (덕분에 찾아보고 익히는 시간이 된 것은 의무의 1승)

전 강의 댓글에서 webpack 과 webpack-cli 를 함께 설치해야된다하여 하니까 아래 오류가 나왔습니다. 플러그인 명령어를 변경을 하니까 webpack이 잘 실행 됐습니다!

오류 내용 : DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

플러그인 설치 명령어 변경 : npm i -D extract-text-webpack-plugin@next

0
느린바람 프로필

npm --save -dev 옵션 질문 느린바람 2018.06.21

npm install gulp --save -dev 명령 실행시 경고로 only=dev로 변경이 되었다고 나옵니다.

경고의 지시대로 only=dev로 설치하게 되면 해당 gulp가 dependency에 추가가 되나 DevDependencies에는 추가가 되지 않고 있습니다.

어떻게 해야 실습대로 DevDependencies에 추가가 될까요 ?

2