vue Webpack 뜯어보기

npm --save commands 용도

From NPM5 moving forward, there’s no difference between npm install and npm install --save — so save yourself some unnecessary typing. Before NPM5, the difference was that npm install --save would save your installed package to your package.json file as a devDependency — now that happens by default when you just use npm install.

 

what is babel?

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: Transform syntax Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js) Source code transformations (codemods) And more! (check out these videos for inspiration)

"babel-core": "^6.26.0",

"babel-loader": "^7.1.2",

"babel-preset-env": "^1.6.0",

"babel-preset-stage-3": "^6.24.1",

 

 

"cross-env": "^5.0.5",

=> 환경에 따라 process.env.NODE_ENV가 undefined로 값이 주입되지 않은 이슈가 있어, 이를 통해 쉽게 해결하려고 함.

[ISSUE] Most Windows command prompts will choke when you set environment variables withNODE_ENV=production like that. (The exception is Bash on Windows, which uses native Bash.) Similarly, there's a difference in how windows and POSIX commands utilize environment variables. With POSIX, you use: $ENV_VAR and on windows you use %ENV_VAR%. [Solution] cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform. Just set it like you would if it's running on a POSIX system, and cross-env will take care of setting it properly.

"css-loader": "^0.28.7",

To use css-loader, webpack@5 is required The css-loader interprets @import and url() like import/require() and will resolve them.

 

 

"node-sass": "^4.5.3",

"sass-loader": "^6.0.6",

 

"vue-loader": "^13.0.5",

"vue-template-compiler": "^2.4.4",

 

"file-loader": "^1.1.4",

The file-loader resolves import/require() on a file into a url and emits the file into the output directory. for webpack

"webpack": "^3.6.0",

"webpack-dev-server": "^2.9.1"