Vue 프로젝트 구성(w. webpack) - 2

webpack(Vue~)

---

🐱 4. webpack Vue setting

🐯 1. vue파일을 가져오는 vue-loader

vue파일을 가져와서 읽을 준비까지만 한다.

> 설치

'npm info vue-loader`을 이용하여 버전 확인 후 설치한다.

> npm i -D vue-loader@next

> webpack.config.js 설정

test: 정규표현식 : 정규표현식과 같은 파일 찾아준다.
(정규표현식.test(문자)이렇게 사용하면 문자 내부에 정규표현식과 일치하는 내용 확인하는 것)
use: 'vue-loader': test를 잘 할 수 있게 vue-loader의 도움을 받는다.

// const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

// module.exports = {
  // resolve: {
    // extensions: ['.vue', '.js'],
    // alias: {
      // '~': path.resolve(__dirname, 'src')
    // }
  // },
  // entry: './src/main.js',
  // output: {
    // path: path.resolve(__dirname, 'dist'), //해석완료후 결과물 반환장소
    // filename: 'hello.js', //해석완료 후 이름
    // clean: true
  // },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
// }

🐯 2. vue 변환시켜주는@vue/compiler-sfc

vue-loader로 가져온 파일을 실행가능하게 변환시켜주는 것
(vue 랑 버전이 같아야 합니다.)

> 설치

> npm i -D @vue/compiler-sfc

---

🐱 5. webpack html setting

🐯 1. html 파일도 자동으로 html-webpack-plugin

dist 폴더에 index.html파일이 없는 것을 볼 수 있습니다.
즉, npm run build("scripts" 명시된 대로)를 하면 dist에 html파일이 들어가게 하는 것

> 설치

> npm i -D html-webpack-plugin

> webpack.config.js 설정

HtmlPlugins의 template는 webpack이 해석해야 하는 html이 어디있는 가 파악하는 용도입니다. (원래 path.resolve(__dirname, 'src/index.html') 이지만 path.resolve()가 내장되어 있어 생략 가능합니다.)

// const path = require('path');
// const { VueLoaderPlugin } = require('vue-loader');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  // resolve: {
    // extensions: ['.vue', '.js'],
    // alias: {
      // '~': path.resolve(__dirname, 'src')
    // }
  // },
  // entry: './src/main.js',
  // output: {
    // path: path.resolve(__dirname, 'dist'), //해석완료후 결과물 반환장소
    // filename: 'hello.js', //해석완료 후 이름
    // clean: true
  // },
  // module: {
    // rules: [
      // {
        // test: /\.vue$/,
        // use: 'vue-loader'
      // }
    // ]
  // },
  plugins: [
    // new VueLoaderPlugin(),
    new HtmlPlugin({
      template: 'src/index.html',
    })
  ]
}

---

🐱 6. webpack css/scss setting

🐯 1. Vue <style> 실행을 위한 css-loader, vue-style-loader

> 설치

css-loader: css를 해석해 줄 수 있는 loader
vue-style-loader: vue <style를 읽어 html쪽에 삽입 가능하도록 하는 loader

 > npm i -D css-loader vue-style-loader

> webpack.config.js 설정

loader 을 적는 순서 중요(먼저 실행 -> 나중에 작성해야 한다.)

// const path = require('path');
// const { VueLoaderPlugin } = require('vue-loader');
// const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  // resolve: {
    // extensions: ['.vue', '.js'],
    // alias: {
      // '~': path.resolve(__dirname, 'src')
    // }
  // },
  // entry: './src/main.js',
  // output: {
    // path: path.resolve(__dirname, 'dist'), //해석완료후 결과물 반환장소
    // filename: 'hello.js', //해석완료 후 이름
    // clean: true
  // },
  module: {
    rules: [
      // {
        // test: /\.vue$/,
        // use: 'vue-loader'
      // },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  //plugins: [
    //new VueLoaderPlugin(),
    //new HtmlPlugin({
      //template: 'src/index.html',
    //})
  //]
}

🐯 2. scss 실행을 위한 sass, sass-loader

<style lang="scss" 와 같이 vue에서 사용을 해야 합니다.

> 설치

 > npm i -D sass sass-loader

> webpack.config.js 설정

// const path = require('path');
// const { VueLoaderPlugin } = require('vue-loader');
// const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  // resolve: {
    // extensions: ['.vue', '.js'],
    // alias: {
      // '~': path.resolve(__dirname, 'src')
    // }
  // },
  // entry: './src/main.js',
  // output: {
    // path: path.resolve(__dirname, 'dist'), //해석완료후 결과물 반환장소
    // filename: 'hello.js', //해석완료 후 이름
    // clean: true
  // },
  module: {
    rules: [
      // {
        // test: /\.vue$/,
        // use: 'vue-loader'
      // },
      {
        test: /\.s?css$/,
        use: [
          'vue-style-loader',
          'css-loader'
          'sass-loader'
        ]
      }
    ]
  },
  // plugins: [
    // new VueLoaderPlugin(),
    // new HtmlPlugin({
      // template: 'src/index.html',
    // })
  // ]
}

---

🐱 7. webpack 고정파일(img, .ico) setting

🐯 1. 고정 파일(img, .ico...)를 dist로 옮기기 위한 copy-webpack-plugin

> 설치

> npm i -D copy-webpack-plugin

> webpack.config.js 설정

patterns: from에서 부터 to(output option의 경로를 참조해서 생략 가능)까지

// const path = require('path');
// const { VueLoaderPlugin } = require('vue-loader');
// const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // resolve: {
    // extensions: ['.vue', '.js'],
    // alias: {
      // '~': path.resolve(__dirname, 'src')
    // }
  // },
  // entry: './src/main.js',
  // output: {
    // path: path.resolve(__dirname, 'dist'), //해석완료후 결과물 반환장소
    // filename: 'hello.js', //해석완료 후 이름
    // clean: true
  // },
  // module: {
    // rules: [
      // {
        // test: /\.vue$/,
        // use: 'vue-loader'
      // },
      // {
        // test: /\.s?css$/,
        // use: [
          // 'vue-style-loader',
          // 'css-loader'
          // 'sass-loader'
        // ]
      // }
    // ]
  // },
  plugins: [
    // new VueLoaderPlugin(),
    // new HtmlPlugin({
      // template: 'src/index.html',
    // }),
    new CopyPlugin({
      patterns: [{from: 'static'}]
    })
  ]
}

---

🐱 8. eslint 설정

🐯 1. 코드 이쁘게 하기 위한 eslint, eslint-plugin-vue

> 설치

> npm i -D eslint eslint-plugin-vue

> VSCode Extension 설치

> .eslintrc.json 설정

https://eslint.vuejs.org/rules/
여기서 규칙 보고 하나씩 넣어보자 저는 간단하게 넣었습니다. :)

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended"
  ],
  "rules": {
    "semi" :["error", "always"],
    "quotes": ["error", "single"],
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
  }
}

> settings.json 설정

VSCode에서 command + shift + p를 눌러 setting을 검색하면 JSON에서 다음과 같은 것을 추가해주면 됩니다.

  "editor.codeActionsOnSave": {
    "source.fixAll": true 
  }

 

마치며

확인을 하기 위해 `dist` 폴더에서의 `.html`에서 `VSCode` 의 `extestion`인 `live server`을 이용해서 확인을 해보면 간단하게 확인을 할 수 있습니다... 휴 뭐가 이렇게 많지...

그리고 뭐가 다운 받았는지 확인이 어렵다면 !!! `npm list`를 통해 확인해보세요!!

그리고 github에 정리를 해두면 좋을 것 같은데 아직 익숙하지 않으니 그냥 어렵게 가보도록 하겠습니다. :)

끝난줄 알았지만 마지막 하나 더 있습니다. ㅋㅋㅋㅋ

 

REF

https://webpack.js.org/
https://www.npmjs.com/package/webpack-cli