쉽게 배우는 Webpack

쉽게 배우는 Webpack

(17개의 수강평)

674명의 수강생

38,500원

장기효(캡틴판교)
평생
초급
수료증
51개 수업, 총 3시간 31분
Wishlist
Yu Jae Seung 프로필

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

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

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

사실 웹개발 환경이 아직 익숙하지 않은 상태에서 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의 설정 변경이 필요한 것 같습니다. 하늬파람 4달 전

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

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

에 나와 있네요.

use: [

{ loader: 'style-loader' },

{

loader: 'css-loader',

options: {

modules: true

}

},

]

1
양기훈 프로필

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

0
양기훈 프로필

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

  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 정의 슈퍼장 7달 전

위 강의에서 사용된 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 오류 오병권 8달 전

[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을 적용하고 싶습니다. 오병권 8달 전

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 8달 전

안녕하세요 캡틴 판교님

웹팩 강좌에서 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 9달 전

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

0
거북이가좋아 프로필

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

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'); 은 언제 쓰실려고 가져오신건가요? 김우석 10달 전

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

0
Gichul Roh 프로필

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

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

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

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

1
SuYun Lee 프로필

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

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

따라만 하다보면 에러가 나네요~ (덕분에 찾아보고 익히는 시간이 된 것은 의무의 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 옵션 질문 느린바람 11달 전

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

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

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

2
둥두루 프로필

webpack app/index.js dist/bundle.js 명령을 실행하니... 둥두루 11달 전

ARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in multi ./app/index.js dist/bundle.js

Module not found: Error: Can't resolve 'dist/bundle.js' in '/Users/imac.suntae/Projects/Z_Study/LearnWebpack/getting-started'

@ multi ./app/index.js dist/bundle.js

이런 오류가 뜹니다.

검색해보니 package.json 에서 scripts부분을 수정하고 명령어도 다른 형식을 실행해야 하던데 어떻게 된건가요?

2