從搭建vue-腳手架到掌握webpack配置（一.基礎配置）

JensonWild發表於2018-01-09
VueWeb

前言

學習vue的過程肯定會接觸到vue的單檔案元件，進而接觸到vue-cli(vue工程構建的腳手架工具)，但是vue-cli建立的工程對初學者很不友好，vue init webpack-simple project-name建立的專案又太過簡單和片面。

本教程會分幾篇文章逐步深入配置webpack，想要後續更新可以關注哦~

接下來我們從初始化到寫配置再到新增loader和外掛逐步構建一個可用的vue工程化環境，讓初學者親自搭建vue-cli之餘還了解到webpack常用的一些配置項。

注意 本教程適用webpack3，並不支援webpack4以上

一些官方文件

vue-loader

vue-loader,是用於編譯vue專案中元件化檔案 *.vue ，把其轉換為JavaScript的webpack loader。這是vue工作最重要也是一定會用到的loader，所以提前提一下。

建立工程

前提你已經安裝了node、npm環境

mkdir project-vue
cd project-vue

npm init
//初始化設定都按enter預設就好，或者按你需要改
複製程式碼

安裝webpack到專案中

npm install --save-dev webpack
//囉嗦一下淘寶映象設定
npm install -g cnpm –registry=https://registry.npm.taobao.org
複製程式碼

建立webpack配置檔案

webpack在執行時候會找到啟用webpack命令目錄下的webpack.config.js,所以要建立該檔案到專案根目錄下。

//webpack.config.js
const path = require('path')
module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"js/[name].js"
    }
}
複製程式碼

以上是最簡單的模板，設定了入口檔案（entry）和出口地址（output），這些有一點webpack基礎的都知道，不瞭解的先去入門一下webpack的基礎配置。

而path函式則是node自帶的路徑相關的中介軟體，基本上整個專案就用到這樣一個node的中介軟體，path就是用來做路徑拼接返回一個路徑字串，可以簡要看一下path。

  • 同時還要建立index.html和main.js檔案，專案目錄結構如下：

專案目錄結構

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="./dist/js/main.js"></script>
</body>
</html>

複製程式碼

main.js裡面隨便寫點js就行

執行一下試試

webpack
複製程式碼

沒有在全域性安裝webpacknpm install -g webpack的話以上命令無法執行。也可以修改npm scripts快捷執行,開啟package.json,新增scripts項。

這裡有一份阮一峰老師 npm script的介紹，不用謝

{
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "this is a vue demo",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  }
}
複製程式碼
npm run build
複製程式碼

根目錄下會多出一個dist資料夾裡面放了打包好的檔案。

引入一系列的依賴和loader

vue工程當然要安裝vue依賴啦~~

npm install --save vue

複製程式碼

vue-loader是必須的，vue-template-compiler是vue-loader必須的依賴

npm install --save-dev vue-loader vue-template-compiler
複製程式碼

寫現代的專案怎麼可能不用到es6以上，來個es編譯器loader

npm install --save-dev babel-core babel-loader
複製程式碼

再來個css的載入器和轉換器,style-loader會把css轉成js，再貼到html的style標籤上的哦~

npm install --save-dev css-loader style-loader
複製程式碼

還有圖片檔案和字型檔案的載入器，url-loader依賴於file-loader所以都要安裝，url-loader會把小於限制的檔案改成base64格式直接傳入src裡面，可以降低網路請求次數。而file-loader會自動幫我們新增檔名規則而且url地址一起跟著改變。

npm install --save-dev file-loader url-loader
複製程式碼

以上的loader的配置下面開始簡要講解

loader配置項

每一種loader都對應著一種檔案，我們匹配專案種的檔案新增loader。

配置項的簡要介紹寫在註釋裡囉, 認真看註釋咯！！！

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry:{
        app:'./src/main.js',
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"js/[name].js",
    },
    module:{
        rules:[
            {
                test:/\.js$/, //用正則匹配檔案，用require或者import引入的都會匹配到
                loader:"babel-loader", //載入器名，就是上一步安裝的loader
                exclude:/node_modules/ //排除node_modules目錄，我們不載入node模組中的js哦~
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    // 'postcss-loader'
                ]
                
                //依次使用以上loader載入css檔案，postcss-loader可以暫時不加，後面再深入修改webpack配置的時候再說用處
                //
                //也可以寫成這樣 loader："style-loader!css-loader!postcss-loader"
            },
            {
                test:/\.(png|jpe?j|gif|svg)(\?.*)?$/,
                loader:'url-loader',
                options:{
                    limit:10000,
                    name:'img/[name].[ext]?[hash]'
                }
                //圖片檔案大小小於limit的數值，就會被改寫成base64直接填入url裡面，
                //不然會輸出到dist/img目錄下，[name]原檔名，[ext]原字尾，[hash]在url上加上一點雜湊值避免快取。
            },
            {
                test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader:"url-loader",
                options:{
                    limit:10000,
                    name:'fonts/[name].[ext]?[hash]'
                }
                //和上面一致
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
                //這一個loader當然是vue專案必須的載入器啦，不加其他規則的話，
                //簡單的這樣引入就可以了，vue-loader會把vue單檔案直接轉成js。
            },
        ]
    },
    resolve:{
        //引入路徑是不用寫對應的字尾名
        extensions: ['.js', '.vue', '.json'],
        //縮寫擴充套件
        alias:{
            //正在使用的是vue的執行時版本，而此版本中的編譯器時不可用的，我們需要把它切換成執行時 + 編譯的版本
            'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
            //用@直接指引到src目錄下，如：'./src/main'可以寫成、'@/main'
            '@': path.resolve(__dirname,'./src'),
        }
    },
}
複製程式碼

官方中文文件還介紹了一些以上用到的loader和其他的loader，可以去看一下。

用loader的時候可以上《npmjs》檢視每個loader或者依賴的詳細用法，這是一個好習慣！~

npmjs

開始使用.vue

不要說你一點vue都不會來看這偏文章哦

main.js改成如下

import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'

new Vue({
  el:"#app",
  template:'<App/>',
  components:{App}
})

複製程式碼

新建一個app.vue檔案

<template>
    <div id="app">
        <img src="./images/logo.png" alt="logo" />
        <span>{{msg}}</span>
        <p class="test">test text</p>
    </div>
</template>
<script>
import Vue from 'vue'
    export default {
        name:'app',
        data(){
            return {
                msg:"hello vue !!"
            }
        },
    }
</script>
<style >
    .test{
        color:#020202
    }
</style>
<style lang="less"><!--我好像還沒說引入less哦，下面說-->
    #app{
        img{width:100px;}
    }
</style>
複製程式碼

別忘了弄張圖片，寫個main.css哦

/*main.css*/
@import './reset.css';
#app{
    color:red;
}
複製程式碼

我還引入了reset.css

src目錄

用less或者sass

你可以在專案中用less或者sass，相對的就要安裝less-loader和sass-loader

npm install --save-dev less-loader
npm install --save-dev sass-loader
複製程式碼

如果沒有在全域性安裝less或sass編譯器的話還有安裝一下，執行上面loader安裝之前先安裝less或sass

安裝到本專案中
npm install --save-dev less
安裝到全域性中
npm install --g less
複製程式碼

以less-loader為例，修改webpack.config.js

{
    test:/\.less$/,
    use:[
        'vue-style-loader'
        'css-loader',
        'less-loader'
    ]
},
{
    test:/\.vue$/,
    loader:'vue-loader',
    options:{
        loaders:{
            'less':[//lang屬性對應的名稱
                'vue-style-loader'//首先給vue的樣式loader過濾一遍
                'css-loader',//css-loader,把css轉js
                'less-loader'//用less編譯
            ]
        }
    }
}
複製程式碼

使用vue單檔案元件的時候給lang屬性新增標識就可以了，less字尾的檔案也會一起進行編譯

<style lang="less">
    #app{
        img{width:100px;}
    }
</style>
複製程式碼

sass類似，但sass帶有兩種語法規範sass和scss，需要分別設定，下面就貼一點vue-cli的程式碼，不過的介紹了。

sass

根據less和sass前處理器的新增和配置方法，你可以用上typeScript、pug等js和html的預處理外掛。記得給template、script、style標籤新增lang屬性說明哦

有了es6 用上js的其他預處理語言的情況也不多了，html的話還是習慣寫完整dom

打包執行一下

打包之前我改改npm scripts,這樣就可以看到打包進度，和隱藏不必要的資訊

 "build": "webpack --progress --hide-modules"
複製程式碼

執行打包

npm run build
複製程式碼

在瀏覽器中開啟index.html,可以看到執行正常

image

下期預告

目前整個vue專案基本可用，但是還處在最基礎的loader新增和配置階段，後續還有熱插拔、程式碼提取、程式碼壓縮的等一系列plugins（外掛）的引入。

有vue-cli和webpack使用基礎的人會認為，以上內容更偏向入門，但是凡事都有一個順序漸進的過程，對初學者來說從0開始搭建是一個很有效的學習過程，基礎工程搭好了，後面就是重頭戲了。

下一期我們來進一步新增外掛實現更多的功能，也會引入編譯器轉換器的第三方配置介紹（.babelrc、postcss）。

參考

相關文章