웹팩의 기본 씪쓰 컨셉
https://webpack.js.org/concepts/ 참고여
처음에는 내가 한글로 쓰다가 존나 귀찮아서 구글 번역기에 넣었슴미다
Concepts
webpack is a static module bundler for modern JavaScript applications.
웹팩은 정적 모듈 번들러이다 모던 자바스크립트 어플을 위한.
Since version 4.0.0, webpack does not require a configuration file to bundle your project, nevertheless it is incredibly configurable to better fit your needs.
4.0.0버전 이래로 웹팩은 설정 파일을 필요로 하지않는다 니놈 프로젝트 번들할라고
그럼에도 불구하고 웹팩은 존나게 configurable하다 니놈 요구사항 맞출라고
To get started you only need to understand its Core Concepts:
시작하기 위해서 닌 오직 웹팩의 코어 컨셉들만 이해하면 된다:
Entry
$143.86
Output
./dist/main.js for the main output file and to the ./dist folder for any other generated file.const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'), // 생성된 번들을 내보낼 위치
filename: 'my-first-webpack.bundle.js' // 우리 번들의 이름
}
};Loaders
At a high level, loaders have two properties in your webpack configuration:
- The
testproperty identifies which file or files should be transformed. - The
useproperty indicates which loader should be used to do the transforming.
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};The configuration above has defined a rules property for a single module with two required properties: test and use. This tells webpack's compiler the following:
위의 설정은 test 및 use의 두 가지 필수 속성이있는 단일 모듈에 대한 rules 속성을 정의했습니다. 이것은 webpack의 컴파일러에게 다음과 같이 알려줍니다 :
"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a
require()/importstatement, use theraw-loaderto transform it before you add it to the bundle."
웹팩 컴파일러년아, 니년이 txt확장자로 resolve되는 경로를 발견한다고 해봐
문 내부에서 이년아, 그러면 그걸 변경할려면 raw-loader써라, 번들에 추가하기 전에require()/import
Plugins
In order to use a plugin, you need to
require() it and add it to the plugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the new operator.const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};Mode
mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.