webpack에서 Vue 파일과 SCSS+ExtractTextPlugin 빌드

12957 단어 SassVue.jswebpack
Vue SCSS Bootstrap 개발 환경.
Laravel Mix 라든지로 간단하게 구축할 수 있어 버리므로, 이해하기 위해서도, 한 번 스스로 제대로 webpack 설정해 보려고 생각하면 굉장히 수고했다.
그래서 잊지 않도록 메모.

하고 싶은 일


  • webpack에서 컴파일 (watch에서 파일 변경을 모니터링)
  • Vue.js를 사용하고 싶습니다. (단일 파일 구성 요소를 사용하고 싶습니다.)
  • 스타일은 Scss로 씁니다
  • CSS는 다른 파일에 쓰고 싶습니다
  • 기본 스타일은 Bootstrap을 사용하고 싶습니다

    • 라는 느낌 때의 webpack.config.js

    파일 구성




    ↓ 내용


    준비



    index.html
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>webpack test</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main id="app">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <test></test>
        </div>
      </div>
    </div>
  </main>
  <script src="js/bundle.js"></script>
</body>
</html>

    npm 설치



    package.json
    {

//
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "watch:js": "watch 'npm run dev' src/js/",
    "watch:css": "watch 'npm run dev' src/scss/",
    "watch": "npm run watch:js & npm run watch:css"
  },
  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    "vue": "^2.5.3"
  },
  "devDependencies": {
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.6.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "vue-loader": "^13.0.4",
    "vue-template-compiler": "^2.4.2",
    "watch": "^1.0.2",
    "webpack": "^3.8.1"
  }
}

    package.json은 이런 느낌이었습니다.
    혹시, 필요없는 패키지도 있을지도? ?
    (scripts 근처에서는 아마도 더 스마트한 방법이 있다고 생각합니다)

    설정



    webpack.config.js
    var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/js/app.js', // jsファイル読み込み先
  output: {
    path: __dirname,
    filename: './public/js/bundle.js'　 // jsファイル出力先
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js'
　　　　　　　　}
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin('./public/css/style.css') // CSSファイル出力先
  ]
};

    Bootstrap 사용



    style.scss
    $icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

div{
    h1{
        //何か書く
    }
}

    Vue 컴포넌트



    app.js
    import Vue from 'vue';
import test from './components/Test.vue';  //コンポーネントファイル

//スタイル
require('../scss/style.scss');

const app = new Vue({
    el: '#app',
    components: {
    "test": test,
  },
});

    Test.vue
    <template lang="html">
  <div>
    <h1>webpack</h1>
    <h2>のテストだよ</h2>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">

</style>

    빌드(컴파일)


    $ npm run dev
    감시할 때$ npm run watch
    그래서 어떻게든 할 수 있었던 것 같습니다.
    Laravel 8 로그인 후 다른 장치 로그 아웃
    pandas read_csv에서 사용자 에이전트 설정

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage