wepback基礎配置(構建一個vue-cli)--2

格砸發表於2018-02-06
Vue

管理非js依賴

webpack對於非js資源的載入，通過配置項module實現。
比如：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};
複製程式碼

指定了當載入了一個.css模組時，使用style-loader或者css-loader對其進行解析。
當然這些loader是需要進行安裝才可以使用的，npm install --save-dev style-loader css-loader。

vue單檔案元件

在上一章我們提到了.vue單檔案元件的一個優點：將模板編譯成render函式，當然，優點不止這一個：單檔案元件的優勢。
所以我們準備使用單檔案元件進行開發，那麼問題來了，怎麼載入.vue模組？
前面提到了，對於非js資源我們需要使用配置module來指定怎麼載入，也就是指定某個loder。
對於.vue檔案，vue官網有官方的載入器vue-loader。
首先進行安裝：

npm install --save-dev vue-loader

複製程式碼

安裝完成後提示我們 vue-loader@14.1.1 requires a peer of vue-template-compiler@^2.0.0 but none was installed.

npm install --save-dev vue-template-compiler

複製程式碼

OK！

我們先不使用loader載入一下.vue檔案：
增加App.vue元件

webpack-demo
  |- package.json
  |- webpack.config.js
  |- index.html
  |- /src
    |- app.js
+   |- App.vue
複製程式碼

修改app.js：

import Vue from 'vue';
import App from './App.vue';

Vue.config.devtools = true;
Vue.config.performance = true;
Vue.config.productionTip = false;

// const app = {
  // template: '<h1>HELLO,PADAKER</h1>'
//   render(h) {
//     return h('h1', 'HELLO,PADAKER');
//   }
// }

new Vue({
  el: '#app',
  render(h) {
    return h('app');
  },
  // template: '<app />',
  components: {
    // app
    App
  }
});
複製程式碼

App.vue：

<template>
  <h1>HELLO,PADAKER</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>
複製程式碼

執行npm run build：

ERROR in ./src/App.vue Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

講得很清楚了，你需要合適的載入器處理這類檔案，接下來我們配置webpack：

module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
複製程式碼

再執行npm run build，ok，沒報錯，開啟index.html，發現成功渲染，也沒有報runtime-only build的錯。

vue-loader配置項

將.vue解析打包也不是一件簡單的事情。首先.vue檔案需要處理template，script，style三個部分，這三個部分如何處理、需不需要載入器、預處理？這些都可以通過配置來自定義。

  1. 首先我們來看看template：
  • vue-loader將template的內容直接處理為字串，然後編譯成render函式，這也就是為什麼需要先安裝vue-template-compiler的原因。
  • preserveWhitespace去除標籤之間的空格（去除inline元素之間的間隙）
  1. style：
  • 通過loaders選項，可以覆蓋style裡的內容的預設載入器：
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          css: 'css-style'
        }
      }
    }
  ]
}
複製程式碼

vue-loader預設將樣式解析出來後，通過style標籤的形式載入在html上，這樣做可以減少請求的次數，但是也增加了.html檔案的體積。有些情況下我們希望能將.vue檔案的style解析出來的css單獨存放到一個.css檔案中，以便能夠被瀏覽器單獨快取。所以需要以下設定：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ]
};
複製程式碼

並在html檔案中引入：

<link rel="stylesheet" href="style.css">
複製程式碼
  • cssSourceMap： 當開啟該選項時，在devtool裡能準確的跟蹤到樣式所在檔案的行數。預設開啟，但是隻有在webpack的devtool配置項不為false時生效。
// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // ...
          cssSourceMap: true
        }
      }
    ]
  },
  devtool: '#source-map'
};

複製程式碼
  1. script：  
  • 使用eslint進行程式碼檢驗
    首先安裝eslint、eslint-loader；
npm install --save-dev eslint eslint-loader
複製程式碼

然後設定webpack配置項。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // only lint local *.vue files
+     {
+       enforce: 'pre',
+       test: /\.(js|vue)$/,
+       loader: 'eslint-loader',
+       exclude: /node_modules/
+     },
      // but use vue-loader for all *.vue files
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}
複製程式碼

為了檢測.vue檔案，還需要使用到eslint-plugin-vue，同樣先安裝：

npm install --save-dev eslint-plugin-vue
複製程式碼

在根目錄新建.eslintrc.js檔案：

module.exports = {
    "root": true,
-   "parser": 'babel-eslint',
    "parserOptions": {
+     "parser": 'babel-eslint',
      "sourceType": 'module'
    },
    env: {
      "browser": true,
    },
    extends: [
      "standard",
+     "plugin:vue/essential"
    ]
};
複製程式碼

在繼承的語法規則裡面，我們使用的是standard規則集，為了使用standard共享設定，還需安裝：

npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
複製程式碼

現在，當我們再去執行npm run build構建打包時，webpack會先呼叫eslint檢測語法錯誤。由於安裝了eslint-plugin-vue，同時也會檢測.vue檔案中script的語法錯誤以及vue開發的一些規則。

小結：

目前我們實現了載入.vue元件，瞭解瞭如何對style塊配置相應的載入器進行載入，對解析出來的的css樣式如何提取成為單檔案，還有對專案的eslint配置。

相關文章