3.Webpack Plugin 설치과정 및 copy-webpack-plugin

 webpack plugin 설치과정 및 설명예제 입니다

1.Entry

 - 자바스크립트가 로딩하는 모듈이며 모듈간의 의존성은 증가하며, 의존성의 그래프의 진입점을 웹팩에서  Entry이다 .

  entry:{
    app:[
      '@babel/polyfill',
      path.join(__dirname,'main.js')
    ]
  },

2.Output 

-엔트리 에설정한 자바스크립트 파일을시작으로 의존되어 있는 모든 모듈을 하나로묶을것이다 번들된 결과물을 처리할 위치는 Output에 기록한다.

output:{
    filename:'[name].js',//app.js
    path:path.join(__dirname,'dist')
  },

3.loader (로더)

웹팩은 모든 파일을 모듈로 관리한다고 한다. 자바스크립트 뿐만아닌 이미지,폰트,스타일 시트 전부 모듈로 관리한다.

로더는 use 키로 구성된객체로 설정할수가 있다 

 

  module:{
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:'babel-loader'
      },
      {
        test:/\.css$/,
        use:[
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },

https://webpack.js.org/concepts/loaders/#loader-features 

Loaders | webpack

module.rules 를 사용해 여러개의 로더 지정이 가능하다. 이것은 로더를 표시하는 간결한 방법이며, 코드를 깔끔하게 유지하는데 도움이 된다. 또한 각 로더에 대한 전체 개요를 제공한다.

로더는 오른쪽에서 왼쪽으로 평가, 실행된다고 한다.

 

4.npm run dev fails : ValidationError: Invalid options object  오류 가 발생했다 .

npm run dev fails : ValidationError: Invalid options object

 

https://stackoverflow.com/questions/61937054/npm-run-dev-fails-validationerror-invalid-options-object

npm run dev fails : ValidationError: Invalid options object

즉, webpack 자체의 문제가 아닌 copy-webpack-plugin이 버전 6 이상부터는 Patterns를 한번더 감싸줘야 한다는 의미이다.