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

時間 2019-11-06

標籤搭建 vue 腳手架掌握 webpack 配置基礎简体版

原文原文鏈接

前言

學習vue的過程確定會接觸到vue的單文件組件，進而接觸到vue-cli(vue工程構建的腳手架工具)，可是vue-cli建立的工程對初學者很不友好，vue init webpack-simple project-name建立的項目又太過簡單和片面。css

本教程會分幾篇文章逐步深刻配置webpack，想要後續更新能夠關注哦~html

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

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

一些官方文檔

vue-loader

vue-loader,是用於編譯vue項目中組件化文件 *.vue ，把其轉換爲JavaScript的webpack loader。這是vue工做最重要也是必定會用到的loader，因此提早提一下。node

建立工程

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

mkdir project-vue
cd project-vue

npm init
//初始化設置都按enter默認就好，或者按你須要改
複製代碼

安裝webpack到項目中git

npm install --save-dev webpack
//囉嗦一下淘寶鏡像設置
npm install -g cnpm –registry=https://registry.npm.taobao.org
複製代碼

建立webpack配置文件

webpack在運行時候會找到啓用webpack命令目錄下的webpack.config.js,因此要建立該文件到項目根目錄下。es6

//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的基礎配置。github

而path函數則是node自帶的路徑相關的中間件，基本上整個項目就用到這樣一個node的中間件，path就是用來作路徑拼接返回一個路徑字符串，能夠簡要看一下path。web

同時還要建立index.html和main.js文件，項目目錄結構以下：

index.htmlvue-cli

<!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或者依賴的詳細用法，這是一個好習慣！~

開始使用.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

用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的代碼，不過的介紹了。

根據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,能夠看到運行正常

下期預告

目前整個vue項目基本可用，可是還處在最基礎的loader添加和配置階段，後續還有熱插拔、代碼提取、代碼壓縮的等一系列plugins（插件）的引入。

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

下一期咱們來進一步添加插件實現更多的功能，也會引入編譯器轉換器的第三方配置介紹（.babelrc、postcss）。

第二期已經更新從搭建vue-腳手架到掌握webpack配置（二.插件與提取)

參考

webpack 搭建 vue 項目(juejin.im/post/5a425c…)
vue-loader官方文檔（vue-loader.vuejs.org/zh-cn/）
wepack中文文檔（www.css88.com/doc/webpack…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。