Manta 환경 세팅 - newlife-js/Wiki GitHub Wiki

개발 환경

VS Code
vue + firebase + webpack + bootstrap

1. vue

vue create manta-test

2. webpack

webpack dev server 사용하기로 함

npm i webpack webpack-cli webpack-dev-server vue-loader -D

@webpack.config.js 예시 파일 참고
위 참고 파일에서 사용하는 loader들은 설치해주자

  • vue-loader 설정 필요
const VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [new VueLoaderPlugin()]
  • ico -> png로 변경(favicon) 해야 함
  • mode: none이면 process is not defined 에러 뜸.. -> development로 해주자

@index.html

<script> src="./dist/bundle.js"></script>
  • HtmlExtractPlugin 사용 시에, inject:false 옵션을 넣어주지 않으면, bundle.js가 두 번 들어가게 되어서 두 번 실행됨

3. bootstrap

npm i bootstrap @popperjs/core jquery -D

// sass를 사용하기 위해서는
npm i sass-loader@10 node-sass -D

@webpack.config.js

{
      test: /\.(sass|css|scss)$/,
      use: [
        'vue-style-loader', 'css-loader', 'sass-loader'
      ]
},

@App.vue

// for css
<style>
@import'~bootstrap/dist/css/bootstrap.css'
</style>

// for sass
<style lang="scss">
$primary: #3782d8;
@import'~bootstrap/scss/bootstrap';
</style>

Git 등록

Github Manta

절대경로 @ 설정

강의의 jsconfig.json 파일 수정 방법을 시도해보았지만 실패...
webpack.config.js 파일의 resolve 속성에 추가하니 성공

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.join(__dirname, './src/')  <--- 여기
    },
    extensions: ['*', '.js', '.vue', '.json', '.scss']
},
⚠️ **GitHub.com Fallback** ⚠️