凱開 x 慵懶日子

安裝

不想手動裝webpack，可以直接安裝Vue Cli

不用往下看惹XDD

---

我先前有先裝好webpack & webpack-dev-server

【前端】webpack & webpack-dev-server  ← 點擊他

Vue loader

vue loader 是一個 webpack 的 loader，允許.vue文件

每個.vue 包含 <template>、<script> 和 <style>

更多的loaders，https://webpack.js.org/loaders/

安裝vue-loader和相關loader

1. npm install -D vue vue-loader vue-template-compiler

在webpack.config.js添加vue loader的插件

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

2. npm install -D file-loader url-loader

處理資料路徑 ex. jpg、png的路徑

3. npm install -D css-loader vue-style-loader

應用 .css 文件以及 .vue 文件中的 style 區塊

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader'
  ]
}

4. npm install -D babel-core babel-loader

應用 .js 文件以及 .vue 文件中的 script 區塊

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: file => (
    /node_modules/.test(file) &&
    !/\.vue\.js/.test(file)
  )
}