수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결쉽게 배우는 Webpack
webpack시에 js파일 압축(min)
webpack 시에 js파일 소스들이 한줄로 압축되서 보이는대 압축안되게 수정할수 있나요?
- 미해결쉽게 배우는 Webpack
참고 강의를 찾지 못하겠습니다.
해당 무료강의 찾아도 없는 것 같습니다. 없어진건가요? 아니면 제가 찾지 못한건지.. 좌표 좀 부탁드립니다
- 미해결쉽게 배우는 Webpack
webpack 개발환경과 빌드, 배포, 실서버 적용에 관해서..
이 섹션에 맞지 않는 질문일 수 있지만, 마땅히 질의를 할만한 곳을 찾지 못해이렇게 질의를 남기게 되었습니다.사실 웹개발 환경이 아직 익숙하지 않은 상태에서 vue.js 강좌와 webpack 강좌까지들여다보고 있습니다. 그래서 아직 제대로 이해가 안되는 초보적인 질문일 수 있으니 양해바랍니다.현재 vue-cli 3버전대로 테스트를 하고 있습니다.알기로는 vue-cli를 이용하면 내부적으로 webpack이 적용되어 build 명령어를 주게 되면/dist 폴더에 번들링 된 파일들이 생성되는 것을 확인했습니다.cli에서 제공되는 serve 명령어로 개발서버를 돌려서 테스트 해보고 있는데,실제 운영서버에는 번들링 된 파일(index.html 이하 번들링 된 파일들..)을업로드하여 서버구동을 하는 절차가 맞는건지요?그냥 npm run serve(vue-cli-service serve) 로 돌아가고 있는 서버를 그냥 실제 서비스에 적용하는 것으로 생각하고 있었는데 아닌거 같아서요.. ㅎㅎ;위의 개발환경은 말그대로 개발용으로만 돌리는 서버환경이라고 생각하는게 맞는건지 궁금합니다.두서없는 질의 죄송합니다..^^
- 미해결쉽게 배우는 Webpack
webpack 4에서 webpack.config.js의 설정 변경이 필요한 것 같습니다.
아래처럼 설정을 해야 한다고https://webpack.js.org/concepts/loaders/#configuration에 나와 있네요.use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } }, ]
- 미해결쉽게 배우는 Webpack
splitChunks를 사용해도 에러가 납니다. webpack.config.js 전체 코드가 어떻게 되나요?
(사진)
- 미해결쉽게 배우는 Webpack
webpack app/index.js dist/bundle.js 입력시 ERROR in multi ./app/index.js dist/bundle.js
webpack app/index.js dist/bundle.js 입력시 ERROR in multi ./app/index.js dist/bundle.jswebpack app/index.js --output dist/bundle.js --mode development대쉬가 두개 임...
- 미해결쉽게 배우는 Webpack
프로덕션 빌드시 NODE_ENV 정의
위 강의에서 사용된 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"' } }) ])}
- 미해결쉽게 배우는 Webpack
ExtractTextPlugin 오류
[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-masterwebpack --env=prod --progress --profile --colorsC:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpackbinwebpack.js:348throw err;^TypeError: Cannot read property 'thisCompilation' of undefinedat ExtractTextPlugin.apply (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_modulesextract-text-webpack-plugindistindex.js:183:20)at Compiler.apply (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_modulestapablelibTapable.js:375:16)at webpack (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpacklibwebpack.js:33:19)at processOptions (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpackbinwebpack.js:335:15)at yargs.parse (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpackbinwebpack.js:397:2)at Object.Yargs.self.parse (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpacknode_modulesyargsyargs.js:533:18)at Object. (C:UsersbkDesktopZumInternetgettingstarted-web-mastergettingstarted-web-masternode_moduleswebpackbinwebpack.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:3npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! gettingstarted@1.0.0 build: webpack --env=prod --progress --profile --colorsnpm ERR! Exit status 1npm 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에서 에러가 발생하네요...
- 미해결쉽게 배우는 Webpack
BootStrap을 적용하고 싶습니다.
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))};
- 미해결쉽게 배우는 Webpack
안녕하세요 npm init 이후에 -y 옵션은 어떤 설정을 주는 건지 궁금합니다.
제가 검색을 잘 못하는지 npm init -y option, npm init -y 옵션 등등 여러 키워드로 검색해봤는데 이에 대한 정보가 안나오는데 어떤 설정을 주는 건지 궁금합니다. 감사합니다.
- 미해결쉽게 배우는 Webpack
번들링을 하지 않고… 그냥 하면 왜 안될까요?
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 로 받아서 브라우저로 실행시키려면 어떻게 하면 되나요?
- 미해결쉽게 배우는 Webpack
webpack.config.js 상단에 var webpack = require('webpack'); 은 언제 쓰실려고 가져오신건가요?
상단에 var webpack = require('webpack'); 은 언제 쓰실려고 가져오신건가요?
- 미해결쉽게 배우는 Webpack
Webpack 개발환경 설정 시 타 유료강의 부분을 보고 하라는건지요?
Webpack 개발설정 동영상에서 타 vue 강의 부분을 참고하라고 나오는데, 그 강의 또한 유료강의인데 그건 조금 아니지 않나 생각합니다.그 다음 강의 Webpack CLI 설치를 보면 atom 환경에서 바로 cmd모드인데,조금 건너뛴 느낌인지라 그 다음부터 들어야 하는건지 궁금합니다.
- 미해결쉽게 배우는 Webpack
작성 후 webpack 실행시 에러가 나서 이렇게 처리했습니다.
아직 안정화가 전인가요? 안정화되면 강좌 업데이트 해주신다고했는데 아직인가봐요.따라만 하다보면 에러가 나네요~ (덕분에 찾아보고 익히는 시간이 된 것은 의무의 1승)전 강의 댓글에서 webpack 과 webpack-cli 를 함께 설치해야된다하여 하니까 아래 오류가 나왔습니다. 플러그인 명령어를 변경을 하니까 webpack이 잘 실행 됐습니다!오류 내용 : DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead플러그인 설치 명령어 변경 : npm i -D extract-text-webpack-plugin@next
- 미해결쉽게 배우는 Webpack
npm --save -dev 옵션 질문
npm install gulp --save -dev 명령 실행시 경고로 only=dev로 변경이 되었다고 나옵니다.경고의 지시대로 only=dev로 설치하게 되면 해당 gulp가 dependency에 추가가 되나 DevDependencies에는 추가가 되지 않고 있습니다.어떻게 해야 실습대로 DevDependencies에 추가가 될까요 ?
- 미해결쉽게 배우는 Webpack
webpack app/index.js dist/bundle.js 명령을 실행하니...
ARNING in configurationThe '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.jsModule 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부분을 수정하고 명령어도 다른 형식을 실행해야 하던데 어떻게 된건가요?
- 미해결쉽게 배우는 Webpack
패키지 설치시 글로벌로....
webpack 과 webpack-cli 패키지를 프로젝트 디렉토리에 설치해도 무관하겠죠?꼭 전역적으로 설치해야 하는 이유가 있나요?
- 미해결쉽게 배우는 Webpack
예제 6번부터 막혔어요 ;;
어떤것이 문제인지 잘모르겠어요 .. npm i webpack - g npm i webpack-cli -g 이후 그냥 그대로 예제를 실행하였습니다. webpack app/index.js dist/bundle.js ERROR in multi ./app/index.js dist/bundle.js Module not found: Error: Can't resolve 'dist/bundle.js' in 'D:htmlLearnWebpackgetting-started' @ multi ./app/index.js dist/bundle.js webpack-cli --version 2.1.3 webpack --version 4.8.3
- 미해결쉽게 배우는 Webpack
언제 업데이트 되나요?!
안녕하세요~! vue cli로 project 생성한 경우의 설정 파일에 대한 설명이 너무너무 궁금했는데 (저도 custom하여 사용하고는 있는데, 완전히 다 이해한 상태가 아닌 것 같아서요...) 아직 볼수가 없네요 ㅠㅠ 아쉽습니다 ㅠㅠ 빠른 업데이트 부탁드립니다!! 그럼 수고하세요~!
- 미해결쉽게 배우는 Webpack
안녕하세요. 선생님~
초반 강의에 webpack을 글로벌로 설치한 상태이고 이번 강의와 같이 ExtractTextPlugin까지 플러그인을 설치하고 webpack을 하니 강좌와 같은 오류가 생겨 webpack을 example1디렉토리에서 --save-dev로 설치한 후 실행을 하니The CLI moved into a separate package: webpack-cli.Please install 'webpack-cli' in addition to webpack itself to use the CLI.-> When using npm: npm install webpack-cli -D-> When using yarn: yarn add webpack-cli -D이와 같은 오류가 나왔습니다.그래서 오류 설명과 같이 webpack-cli를 로컬로 설치하고 다시 실행을 해보았지만 청크(?)관련 오류가 나옵니다.DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead/Users/coiners/Desktop/LearnWebpack-master/example1/node_modules/webpack/lib/Chunk.js:460throw new Error(^해결 방법이 없을까요??