Webpack 설정 어떻게 되어 있는지 확인하기 (inspect 명령어 살펴보기)

 @vue/cli-service로 생성한 프로젝트는 웹팩 설정이 어떻게 되어 있는지 파일로 바로 확인할 수 없습니다. 따라서 변경하려고 할 때 어떻게 변경해야 할지 난감합니다. 따라서 vue-cli-service는 적용된 웹팩 설정을 면밀하게 보여주는 inspect 명령어를 제공합니다. global vue binary 또한 inspect 명령을 지원하기 때문에 여러분의 프로젝트 안에서 vue-cli-service inspect를 수행해 줄 수 있습니다.

 

 inspect 명령어는 적용되어 있는 웹팩 설정 내용을 콘솔에 출력해주고 체이닝을 통해서 규칙과 플러그인을 변경할 때 어떻게 해야 하는지 힌트를 줍니다.

---

inpect 명령어를 사용해보기에 앞서 vue-cli로 프로젝트를 생성합니다. 이제 default로 생성한 프로젝트에서 다음 명령어들을 수행해 봅니다.

 

vue create

 

기본 설정 한번에 살펴보기

---

아래 명령어로 웹팩 설정 관련 내용을 파일로 출력할 수 있습니다. output.js의 내용 자체가 유효한 웹팩 설정 객체는 아니고 읽기 좋은 형태로 직렬화 한 결과입니다.

> vue inspect > output.js

{
  mode: 'development',
  context: 'C:\\Users\\Vuedal\\Documents\\vue-inspect-test',
  devtool: 'cheap-module-eval-source-map',
  node: {
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  output: {
    path: 'C:\\Users\\Vuedal\\Documents\\vue-inspect-test\\dist',
    filename: '[name].js',
    publicPath: '/',
    globalObject: '(typeof self !== \'undefined\' ? self : this)'
  },
  resolve: {
    alias: {
      '@': 'C:\\Users\\Pful\\Documents\\vue-inspect-test\\src',
      vue$: 'vue/dist/vue.runtime.esm.js'
    },

위 코드는 output.js 내용 일부를 가져온 것입니다. 개발 모드, 개발 툴로 cheap-module-eval-source-map을 사용하고 있고 웹팩 번들링의 결과가 'C:\\Users\\Vuedal\\Documents\\vue-inspect-test\\dist' 경로에 '[name].js' 형태로 생성될 것임 등을 알 수 있습니다.

 

일부 설정만 살펴보기

---

1180 라인이나 되는 내용을 다 보고싶지 않고 예를 들어 vue나 image와 관련된 설정만 보고 싶을 때는 다음과 같은 명령어를 수행하면 됩니다.

> vue inspect --rule vue
> vue inspect --rule images

html과 관련된 플러그인을 살펴볼 수도 있습니다.

vue inspect --plugin html

/* config.plugin('html') */
new HtmlWebpackPlugin(
  {
    templateParameters: function () { /* omitted long function */ },
    template: 'C:\\Users\\Pful\\Documents\\vue-inspect-test\\public\\index.html'
  }
),

 

설정 대상이 된 모듈 리스트

---

규칙이 적용된 모든 모듈 리스트를 얻을 때는 다음 명령어를,

> vue inspect --rules

[
  'vue',
  'images',
  'svg',
  'media',
  'fonts',
  'pug',
  'css',
  'postcss',
  'scss',
  'sass',
  'less',
  'stylus',
  'js',
  'eslint'
]

적용된 모든 플러그인 리스트를 얻을 때는 다음 명령어를 이용하면 됩니다 :)

> vue inspect --plugins

[
  'vue-loader',
  'define',
  'case-sensitive-paths',
  'friendly-errors',
  'hmr',
  'progress',
  'html',
  'preload',
  'prefetch',
  'copy'
]