Vue.js學習第八天——webpack中的loader、配置vue及插件使用

- webpack中的loader

昨天我們學習了webpack中的css-loader和style-loader，今天我們來學習剩下常用的幾個loader

1. less-loader
顧名思義，這個loader模塊是用來加載less文件的，安裝命令爲npm install --save-dev less-loader less 前一個less-loader是用來加載less文件，後一個less是爲加載less提供的支持文件，用來轉化less成css，安裝完成後進行相應的配置即可，配置在webpack中的loader裏都有，不過這裏我還是貼一下好了

{
  test: /\.less$/,
  use: [{
      loader: "style-loader" // creates style nodes from JS strings
  }, {
      loader: "css-loader" // translates CSS into CommonJS
  }, {
      loader: "less-loader" // compiles Less to CSS
  }]
},

2. url-loader和file-loader
less文件處理完了之後，還有圖片文件要處理，這時候輪到我們的url-loader出場了，安裝命令爲npm install --save-dev url-loader，安裝完成後，進入配置，代碼如下

{
 test: /\.(png|jpg|gif)$/,
 use: [
   {
     loader: 'url-loader',
     options: {
       // 當加載的圖片大小小於limit時，他會將圖片編譯成base64字符串形式 不需要單獨的文件來存儲
       // 當加載的圖片大小大於limit時，使用file-loader模塊進行加載 會單獨打包成另一個文件
       // 這個值默認是8k
       limit: 8192,
       name: 'img/[name][hash:8].[ext]'
     }
   }
 ]
},

我們注意到，這裏面有一個limit屬性，後面跟着的是默認值8192，也就是8k，這裏我直接說一下他的作用好了

當我們的圖片文件小於這個limit值，這時候，圖片會被編譯成base64的字符串形式，不會生成新文件，這時候正常打包文件即可，頁面也能正常顯示；
當我們的圖片文件大於這個limit值，這時候，我們將文件打包時就會報錯，並且要求我們安裝file-loader，安裝命令爲npm install --save-dev file-loader,這個模塊不需要另外進行配置，安裝完成即可，這個時候我們就可以嘗試着重新打包文件，發現並沒有報錯，但是當我們在瀏覽器打開它時，發現圖片並不能顯示，並且控制檯顯示找不到此文件，文件的路徑爲網站的根目錄，並且在dist目錄(存放打包完成後的目錄)下，發現生成了一個新的圖片文件，文件名爲hash類型的，目的是防止重複，所以我們需要在webpack.config.js文件中添加publicPath的一個配置，目的是將路徑前加入dist/這個路徑，使得其能夠找到此圖片，具體的配置如下

output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        // 涉及到路徑 他都會在前面加一個dist 最後就不需要了
        publicPath: 'dist/'
    },

當然在我們後期進行開發的時候，由於index文件都要統一放置在dist目錄下，所以就不存在找不到路徑這一說了，到時候刪去即可。
這時我們發現文件的名字很亂，這樣就會導致我們一時間分不清是什麼文件，所以我們還需要在limit下添加一個name屬性，如上面的代碼所示，這樣當圖片文件大於limit值時，會自動將生成的新文件在我們的name配置下的路徑，並且我們還能指明它的文件名稱，這樣就方便辨認了。

3.babel-loader
當我們在查看打包完成的bundle.js文件時，我們發現其中還是有ES6的語法，這就意味着在不支持ES6的瀏覽器中，我們的代碼是沒有辦法運行的，此時就需要我們採用babel-loader的模塊幫助我們將ES6的語法轉換成ES5。安裝命令爲：npm install babel-loader@7 babel-core babel-preset-es2015，官網上說的命令爲npm install [email protected] @babel/core @babel/preset-env webpack或npm install babel-loader babel-core babel-preset-env webpack,我們這裏爲了將babel-loader的版本和我們的webpack版本一致，採用7的版本，然後這個babel-loader還需要一些核心的東西就是後面跟着的babel-core，再後面的babel-preset-env是一些配置的東西，如果是typescript的轉換則採用不同的配置文件，然後官網後面還跟着webpack這裏我們已經有了就不需要了，安裝完成之後，還要進行配置，代碼如下：

{
  test: /\.js$/,
   exclude: /(node_modules|bower_components)/,
   use: {
     loader: 'babel-loader',
     options: {
       presets: ['es2015']
     }
   }
 }

這時候我們再進行打包的時候bundle.js文件中就不會再有ES6相關的語法了。

- webpack中配置vue

接下來我們就可以在webpack中配置我們的vue環境了，當然我們首先也要安裝有關vue的相應的包及相應的loader，安裝命令爲npm install vue --save和npm install vue-loader vue-template-compiler --save-dev(執行完後需要修改package.json文件中"vue-loader": "^13.0.0",因爲14.0以上版本需要安裝其它插件)，我們也注意到前一個命令沒有加–dev說明它在運行時也是需要我們的vue的，然後我們就可以重新打包文件了，在瀏覽器中打開文件，我們發現文件並不能運行，並且在控制檯報錯了，控制檯顯示我們正在使用的是tuntime-only版本，讓我們使用runtime-compiler版本，實際上vue在構建的時候，構建了以上兩個版本，如果我們使用第一個版本，這就代表代碼中不能有任何template，這個版本就沒有關於編譯template的文件，只有使用runtime-compiler版本，才能編譯template代碼，那們怎麼使用第二個版本呢，這時候就需要相應的配置了，代碼如下：

resolve:{
 // 導入的時候省略後綴
 //extensions:['.js','.css','.vue'],
 // 別名
 alias:{
   'vue$': 'vue/dist/vue.esm.js'
 }
}

完成以上配置後，我們再次打包文件就不會出現以上的情況了，然後就是Vue相關的編寫了，這裏我就不說明怎麼一步步抽取出來了，直接上代碼吧，首先在src中新建Vue文件夾，創建兩個vue文件 Cpn.vue和Tpl.vue

Cpn.vue代碼如下：

<template>
    <div>
        <p>我是Cpn組件</p>
        <p>大家好啊，初次見面嗷</p>
        <button @click="hello">我是Cpn組件的按鈕</button>
    </div>  
</template>

<script>
export default {
    methods: {
        hello(){
            alert('hello');
        }
    },
}
</script>

<style>

</style>

Tpl.vue

<template>
   <div>
        <h1 class="yes">{{message}}</h1>
        <h1>{{date}}</h1>
        <Cpn/>
    </div>
</template>

<script>
    import Cpn from './Cpn.vue';

export default {
    data(){
        return {
            message: 'webpack',
            date: '2020-02-13'
        }
    },
    components:{
        Cpn
    }
}
</script>

<style>
    .yes{
        color:aqua
    }
</style>

main.js代碼(主要看最後關於Vue的部分即可)

// 1.使用CommonJs方式導入
const {add,Unadd} = require('./js/info.js');
add(10,20);
Unadd(20,10);

// 2.使用ES6方式導入
import {chu} from './js/math.js';
chu(20,2);


// 導入css文件
require('./css/nomal.css');

//導入less文件
require('./css/special.less');
document.writeln('<h1>hello beanBag</h1>');

// 導入vue文件
import Vue from 'vue';
// import Tpl from './vue/Tpl'
import Tpl from './vue/Tpl.vue'

new Vue({
    el: '#container',
    template: '<Tpl/>',
    components: {
        Tpl
    }
})

在加載.vue文件時還需要進行如下配置：

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

這裏有一細節問題，就是在導入的時候如果你不想寫文件後綴的話，可以添加下面這行配置：

resolve:{
      // 導入的時候省略後綴
      extensions:['.js','.css','.vue'],
      // 別名
      alias:{
        'vue$': 'vue/dist/vue.esm.js'
      }
    }

- webpack中Plugin的使用

plugin是插件的意思，它是對webpack本身的一種拓展，是一個擴展器，而loader是用於轉換某些類型的模塊，是一個轉換器。

今天只學習了一種插件，BannerPlugin用於添加版權信息
首先應該在webpack.config.js文件中引入webpack模塊，並在plugin屬性中做相應的設置，webpack.config.js文件完整代碼如下：

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        // 涉及到路徑 他都會在前面加一個dist 最後就不需要了
        publicPath: 'dist/'
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          {
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
          },
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  // 當加載的圖片大小小於limit時，他會將圖片編譯成base64字符串形式 不需要單獨的文件來存儲
                  // 當加載的圖片大小大於limit時，使用file-loader模塊進行加載 會單獨打包成另一個文件
                  // 這個值默認是8k
                  limit: 8192,
                  name: 'img/[name][hash:8].[ext]'
                }
              }
            ]
          },
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015']
              }
            }
          },
          {
            test: /\.vue$/,
            use:['vue-loader']
          }
        ]
    },
    resolve:{
      // 導入的時候省略後綴
      extensions:['.js','.css','.vue'],
      // 別名
      alias:{
        'vue$': 'vue/dist/vue.esm.js'
      }
    },
    plugins:[
      new webpack.BannerPlugin('最終版權歸beanBag所有')
    ]
}

這裏注意最後一行即可，這時候當我們重新打包文件的時候，在你打包好的文件的第一行就會出現你在BannerPlugin裏寫的那行話。

Vue.js學習第八天——webpack中的loader、配置vue及插件使用

Vue.js學習第八天——webpack中的loader、配置vue及插件使用

- webpack中的loader

- webpack中配置vue

- webpack中Plugin的使用

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

Vue.js學習第十四天——Promise的使用及瞭解Vuex

Vue.js學習第十三天——導航守衛、keep-alive、項目相關

Vue.js學習第十天——webpack中VueCLI3的創建及ES6相關

將Hexo博客部署到阿里雲服務器

Vue.js學習第十一天——vue中的路由基本使用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結