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

管理非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元素之間的間隙）

2. 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'
};

複製代碼

3. 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配置。