webpack을 4.12.0으로 업그레이드 하니까 갑작스럽게 아래와 같은 에러가 발생하였다.


1
2
3
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
cs


에러발생이유는 찾아보니까, mode를 production으로 사용하다 보니까 개발자 버전에서 필요없는 다른 오류까지도 봐야하기 때문에 dev로 변경하라는 에러 문구였다.


이를 해결하기위해서는 webpack.config.js에 아래 부분을 추가하니까 해결되었다.


1
2
3
performance: {
  hints: process.env.NODE_ENV === 'production' ? "warning" : false
},
cs




어느 순간 webpack으로 모듈화를 진행하는 도중에 다음과 같은 경고가 발생했다.


[BABEL] Note: The code generator has deoptimised the styling of "/Users/jeongcheol/Documents/workspace/wedulpos/src/main/front/lib/fontawesome/js/fontawesome-all.min.js" as it exceeds the ma

x of "500KB".


그냥 단순 경고라고 생각해서 크게 생각하지 않고 넘겼는데, 자꾸 나타나서 알아보았다.


[원인]

 이것은 "불필요한 공백 문자 및 줄 종결자를 포함하지 말라"는 Babel 컴파일러의 compact 옵션과 관련된다. 그래서 이를 해결하기 위해서는 babel의 compact옵션을 꺼주면 해결된다.



loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]


Webpack



- webpack은 모듈 번들러이다.

- 여러 js 파일을 하나의 번들로 만들 수 있다.

- SCSS를 CSS로 돌릴 수 있다.

- EM6를 사용할 수 있다.

- 스타일로더와 CSS 로더등 다양한 로더를 사용할 수 있다.

- 코드 압축을 해주는 UglifyJsPlugin 등 다양한 플러그인등을 사용할 수 있다.

 


설치방법

- node.js를 설치한다. https://nodejs.org/ko/

- npm install -g webpack (npm을 이용하여 webpack을 설치한다)

- npm install --save-dev style-loader css-loader  (css loader)

- npm install --save-dev sass-loader node-sass webpack (scss loader)



사용방법

1. config 설정

webpack에서 사용할 설정을 기술한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack.config.js
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.sass$/, loader: 'style!css!sass' }
    ]
  }
  
  plugins: [
   new webpack.optimize.UglifyJsPlugin({
     compressor: {
       warnings: false,
      },
    })
  ]
};
cs



※ entry : 프로퍼티로 빌드되기전의 파일 경로 기입

※ output : bundle로 만들어질 파일의 정보를 명시

※ 로더 : test 영역은 파일들의 정규식 형태 기입, loader는 사용할 로더들의 이름을 명시


2. webpack 실행

- webpack

- webpack --watch       => 파일의 상태가 변경되면 자동 빌드

- webpack --config myconfig.js     => webpack.config.js를 사용하면 별도 기술을 하지 않지만 새로운 이름의 config를 사용하려면 다음과 같이 사용

+ Recent posts