쉽게 배우는 Webpack

쉽게 배우는 Webpack

(28개의 수강평)

842명의 수강생
38,500원
지식공유자 · 장기효(캡틴판교)
51회 수업 · 총 3시간 31분 수업
평생 무제한 시청
수료증 발급 강좌
수강 난이도 '초급'
gumju park 프로필

manifest을 넣고 돌리면 에러가 나와요. gumju park 2달 전

아래와 같이 manifest  넣고 webpack 을 돌리면 에러납니다.

 

    throw new RemovedPluginError(errorMessage);

                        ^

 

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

    at Object.get [as CommonsChunkPlugin] (C:\work\saramin\LearnWebpack\example2\node_modules\webpack\lib\webpack.js:189:10)

    at Object.<anonymous> (C:\work\saramin\LearnWebpack\example2\webpack.config.js:18:30)

    at Module._compile (C:\work\saramin\LearnWebpack\example2\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

    at Module.load (internal/modules/cjs/loader.js:653:32)

    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

    at Module.require (internal/modules/cjs/loader.js:690:17)

    at require (C:\work\saramin\LearnWebpack\example2\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)

    at requireConfig (C:\Users\user\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:96:18)

    at C:\Users\user\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:109:17

    at Array.forEach (<anonymous>)

    at module.exports (C:\Users\user\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:107:15)

    at Object.<anonymous> (C:\Users\user\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:153:40)

    at Module._compile (internal/modules/cjs/loader.js:776:30)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

    at Module.load (internal/modules/cjs/loader.js:653:32)

    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)

    at startup (internal/bootstrap/node.js:283:19)

    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

이런 에러 메세지 나옵니다.

webpack4 버전이라 그런것 같은데 혹시해결 방법이 있을까요?

 

2
gumju park 프로필

CommonsChunkPlugin 을 사용 했을떄 용량 준다고설명 하셧는데요. gumju park 2달 전

plugins: [
new webpack.optimize.CommonsChunkPlugin({ //공통적으로 사용 하는 모듈(라이브러리)
name: 'vendor' // Specify the common bundle's name.
}),
]
 
해당 코드를 넣고 webpack 돌려도 용량은 동일 하게 나오는데요
혹시 webpack 4 버전에서는 차이가 없나요? 그리고 webpack
돌리면 min.js 처럼 공백없이 다 합처지는게 이거 영상 처럼
공백 포함 되서 나오게 할수 있는 방법이 있나요?
 

1
최범준 프로필

webpack시에 js파일 압축(min) 최범준 3달 전

webpack 시에 js파일 소스들이 한줄로 압축되서 보이는대 압축안되게 수정할수 있나요?

1
jaiyah 프로필

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

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

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

좌표 좀 부탁드립니다

1
Yu Jae Seung 프로필

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

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

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

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

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

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

에 나와 있네요.

use: [

{ loader: 'style-loader' },

{

loader: 'css-loader',

options: {

modules: true

}

},

]

1
양기훈 프로필

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

0
양기훈 프로필

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

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

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

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

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 2018.09.23

안녕하세요 캡틴 판교님

웹팩 강좌에서 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 2018.07.29

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

0
거북이가좋아 프로필

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

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
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강좌들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스