webpack4+Vue搭建自己的Vue-cli

来源:https://www.cnblogs.com/wuvkcyan/archive/2018/08/29/9554170.html
-Advertisement-
Play Games

前言 對於vue cli的強大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻 最近在看webpack4，深感知識淺薄，這兩天也一直在思考cli的配置，藉助一些別人的實踐，嘗試自己搭建vue的項目，這裡使用webpack4版本，之前我在網上查找別人的vue項目搭建,但是都是webpack3的 ...


前言

對於vue-cli的強大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻

最近在看webpack4，深感知識淺薄，這兩天也一直在思考cli的配置，藉助一些別人的實踐，嘗試自己搭建vue的項目，這裡使用webpack4版本，之前我在網上查找別人的vue項目搭建,但是都是webpack3的,所以寫了本文，如果有錯誤,或者有什麼問題,請大佬們指出

關於webpack的本文不會多說，請看webpack文檔

關於本文的github地址vue-MYCLI

你們的start是我發表的動力!!!!!

前置知識

  • 熟悉 webpack4
  • 熟悉 vue

搭建基本骨架

npm init

安裝webpack4

npm install webpack webpack-cli  --save-dev

在開始之前先實驗一下環境

根目錄新建文件 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width， initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue</title>
</head>

<body>
  <script src="./src/mian.js"></script>
</body>

</html>

根目錄新建文件 src/main.js

console.log("我是main");

根目錄新建文件webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, dist),
    filename: 'index.js'
  } 
}

打包js文件

npx webpack --config webpack.config.js

會看到一些報錯,只要構建成功就ok

這裡說明環境是沒有問題的

配置初始生成環境

開始安裝vue-loader吧

npm i webpack vue vue-loader -D  //-D就是--save-dev

安裝完成後看輸出

提示安裝的依賴要安裝

npm install webpack css-loader -D

安裝完畢後新建src/app.vue

<template>
  <div>
    你好 {{ data }}
  </div>
</template>

<script>
  export default {
    data(){
      return {
        data: "Vue"
      }
    }
  }
</script>

<style scoped>

</style>

.vue文件是無法直接運行的,需要在webpack裡面配置loader

這裡參照某課的老師的方法,html用webpack生成(後面說明)

在根目錄新建index.js 刪除index.html

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

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
  render: (h) => h(App)
}).$mount(root)

改寫webpack.config.js

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'), //關於path模塊可以看看阮一峰的教程  http://javascript.ruanyifeng.com/nodejs/path.html#toc0
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }]
  }
}

在package裡面添加腳本

"build": "webpack --config webpack.config.js"

控制台運行

npm run build

不出意外會報錯

這裡有2個問題,一個是沒有指定mode 一個是沒有引用vue的插件

我們需要改寫webpack.config.js,在config裡面加一行

mode: 'production',   //暫時指定為生產環境

再次運行npm run build 會報錯,需要安裝一個包

這個報錯,原本在vue-loader就有提示,不知道為什麼現在沒有,運行之前報錯

Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options

安裝vue-template-compiler

npm install vue-template-compiler -D

再再次運行npm run build

假如按步驟來不除意外這裡可以打包成功了~~~~

我們需要驗證打包文件時候是否正確,所以這裡使用插件HtmlWebpackPlugin,幫我們自動創建html文件,並且在後續的hash文件名上很有用,具體可以看官方介紹

npm install html-webpack-plugin -D

改webpack.config.js代碼

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')   
var HtmlWebpackPlugin = require('html-webpack-plugin');   //引入插件
module.exports = {
  mode: 'production',   //暫時指定為生產環境
  entry: path.resolve(__dirname, 'src/index.js'), //關於path模塊可以看看阮一峰的教程  http://javascript.ruanyifeng.com/nodejs/path.html#toc0
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin()
  ]
}

npm run build打包一下,dist文件夾下麵會有兩個文件

啟動一個靜態伺服器

打包Vue程式完成~~~~

至此完成了最基本的webpack配置

接下來我們要完成的的配置開發環境

配置開發環境

關於開發環境以及生成環境,webpack是需要區分的,根據文檔模塊,我決定在命令裡面指定模式,相應的就將開發環境以及生成環境分開,

這裡我使用的是提起基本的webpack配置使用webpack-merge這個包來拼接我們webpack配置

npm i webpack-merge -D

修改配置文件

將各各環境的代碼區分開,webpack的結構是這樣的

webpack.config.base.js

const path = require('path')



const config =  {
  entry: path.resolve(__dirname, '../src/index.js'), 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }]
  }
}

module.exports = config

webpack.config.build.js

const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')

const config = merge(baseConfig ,{
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin()
  ]
})

module.exports = config

這裡配置開發環境就是重頭戲了,我們使用webpack-dev-server

webpack-dev-server是一個小型的Node.js Express伺服器,代碼都跑在記憶體裡面

安裝webpack-dev-server

npm install webpack-dev-server -D

webpack.config.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = merge(baseConfig, {
  devServer: {
    port: '8000',
    host: 'localhost',
    hot: true, //熱載入
    //quiet: true //控制臺中不輸出打包的信息
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
})

module.exports = config

最後在package裡面添加腳本

"build": "webpack --mode=production --config build/webpack.config.build.js",
"dev": "webpack-dev-server --mode=development --progress --config build/webpack.config.dev.js"

執行npm run dev查看控制台

這就成功了,在瀏覽器裡面輸入http://localhost:8000/,修改app.vue文件,實現了vue-cli的熱載入了~~~~

接下來完善一下,不能只有.vue文件的loader,其他的webpack也要認識

我們配置一下圖片的loader,以及css的loader,同時css使用postcss進行預處理

url-loader 用於將文件轉換為base64 URI file-loader是依賴loader

npm i url-loader file-loader -D

添加配置webpack.config.base.js>module>rules

{
        test: /\.(gif|png|jpg|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 2048,
            name: 'resources/[path][name].[hash:8].[ext]'
          }
        }]
      },

配置css(vue-cli裡面的實現非常友好,有機會可以去看看) 下麵的是最簡單的配置

npm install css-loader -D
npm install style-loader -D
npm install postcss-loader -D

添加配置webpack.config.base.js>module>rules (postcss不瞭解谷歌一下)

{
        test: /\.css$/,
        use: [
          'css-loader',
          'style-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true //啟用源映射支持，postcss-loader將使用其他載入器給出的先前源映射並相應地更新它
            }
          }
        ]
      }
npm install autoprefixer -D

根目錄新建文件postcss.config.js,安裝autoprefixer (自動添加瀏覽器首碼)

const autoprofixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprofixer()
  ]
}

配置到這裡基本的圖片以及css就配置完成了,運行一下試試 npm run dev

我找src下麵創建了assets/img/user.jpg

app.vue

<template>
  <div>
    你好 {{ data }}
    <img src="./assets/img/user.jpg">
  </div>
</template>

<script>
  export default {
    data(){
      return {
        data: "Vue Cli"
      }
    }
  }
</script>

<style>
div{
  font-size: 20px;
  color: red;
}
img {
  width: 100px;
}
</style>

實現了開發環境的圖片以及css的配置

打包一下試試

build後生成的目錄是這樣的

這不是我們想要的,webpack把代碼,類庫,css都打包在一起,這樣不管是上線還是首屏載入都有影響,所以這裡我們要優化webpack

在處理之前想安裝一個可以幫助我們每次build之前自動刪除上次build生成的文件的插件

clean-webpack-plugin這個插件不知道為什麼,怎麼配置路徑都沒效果

這裡我使用rimraf來進行刪除(vue-cli也是使用rimraf,但是他是寫在代碼裡面)

npm install rimraf -D

在package裡面變一下腳本,讓打包之前幫我們刪除之前到打包文件

"build-webpack": "webpack --mode=production --config build/webpack.config.build.js",
"delete": "rimraf dist",
"build": "npm run delete && npm run build-webpack"

分離打包css

它會將所有的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件

npm install extract-text-webpack-plugin@next -D

因為開發環境和生產環境不一樣

我們需要將css部分的代碼分環境配置

  1. 將原先的css配置放到webpack.config.dev.js裡面
  2. 在webpack.config.build.js裡面重寫
module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }]
  },

這樣的話,我們開發環境不影響依舊是之前到模式,build的時候用ExtractTextPlugin幫我們分離非js文件,實現css的分離打包

我們打包一下試試npm run build

分離js文件

接下來是分離js文件,就是將庫文件以及我們的代碼分離開,利於上線後的瀏覽器緩存,代碼會經常變,庫不會經常變

在webpack4之前js分離用的插件是CommonsChunkPlugin,不過這插件現在移除了,現在用的是optimization.splitChunks 來進行公共代碼與第三方代碼的提取,splitChunks參數如下

optimization: {
    splitChunks: { 
      chunks: "initial",         // 代碼塊類型 必須三選一： "initial"（初始化） | "all"(預設就是all) | "async"（動態載入） 
      minSize: 0,                // 最小尺寸，預設0
      minChunks: 1,              // 最小 chunk ，預設1
      maxAsyncRequests: 1,       // 最大非同步請求數， 預設1
      maxInitialRequests: 1,     // 最大初始化請求書，預設1
      name: () => {},            // 名稱，此選項課接收 function
      cacheGroups: {                // 緩存組會繼承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用於配置緩存組。
        priority: "0",              // 緩存組優先順序 false | object |
        vendor: {                   // key 為entry中定義的 入口名稱
          chunks: "initial",        // 必須三選一： "initial"(初始化) | "all" | "async"(預設就是非同步)
          test: /react|lodash/,     // 正則規則驗證，如果符合就提取 chunk
          name: "vendor",           // 要緩存的 分隔出來的 chunk 名稱
          minSize: 0,
          minChunks: 1,
          enforce: true,
          reuseExistingChunk: true   // 可設置是否重用已用chunk 不再創建新的chunk
        }
      }
    }
  }

官方包括這解釋,我並不是很看懂,所以打包策略並不是很好

在webpack.config.build.js>config

output: {
    filename: '[name].[chunkhash:8].js'
  },
optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          test: /node_modules/,  //這裡雖然分離了,但是沒有做到按需引入,看官方配置也不是很明白
          name: 'vendors',
          chunks: 'all'
        }
      }
    },
    runtimeChunk: true
  }

build一下查看目錄,可以看出代碼與庫之間分離了

關於eslint,我就不引入的,有興趣可以討論一下

.gitignore

這裡處理一下git 新建文件.gitignore

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

.editorconfig,

處理一下編譯器的統一配置

新建文件 .editorconfig,(關於editorconfig,以及配置解釋)

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

還有一點要註意,假如沒有效果,vscode需要安裝一個插件EditorConfig for VS Code,其他編譯器不太清楚

.babelrc

處理一下ES6,以及js文件的webpack的loader配置

今天裝了babel-loader8.0.0 報錯報一上午,心態都搞崩了,所以這裡我使用的是7版本

npm install babel-loader@7 babel-core babel-preset-env -D

在webpack.config.base.js>module>rules裡面添加代碼

{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
}

新建文件 .babelrc

{
  "presets": [
    "env"
  ]
}

首先檢查開發環境

我新建了一個es6語法的js 導入到app.vue裡面

運行結果

最後

至此,基本的vue項目骨架的搭建完畢了,當然他沒有vue-cli那麼強大,或許最大的益處是讓我們熟悉一個vue項目的大致webpack配置,當然我們可以一步一步的優化項目


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 二、JS 數據類型和分支語句
    一、JS數據類型 1.基本數據類型 （檢測數據類型：typeof,返回的是字元串） （1） undefined 未定義的 只有一個值：undefined ； 兩種情況會導致undefined類型：沒有聲明：a ； 只聲明未賦值：var a ; 用typeof檢測數據類型，返回‘undefined’。 ...
  • webpack4.x打包配置
    很長時間沒有進行webpack打包配置了，想起來都快有些忘記了，這個東西不是經常用到，只有在新建個項目的時候用到，不用官方模板，自己去動手配置的時候，有時候覺得還是有點難度。今天就想著自己動手進行配置一下，可是還是遇到坑了，折騰了一會，現在的webpack版本都4.x了，有些插件都有些改變。 今天就 ...
  • 《React Native 精解與實戰》書籍連載「iOS 平臺與 React Native 混合開發」
    此文是我的出版書籍[《React Native 精解與實戰》](http://rn.parryqiu.com/)連載分享，此書由機械工業出版社出版，書中詳解了 React Native 框架底層原理、React Native 組件佈局、組件與 API 的介紹與代碼實戰，以及 React Native... ...
  • 前端規範大總結
    目的：為了提高工作效率，便於後臺人員添加功能及前端後期優化維護，輸出高質量的文檔，在網站建設中，使結構更加清晰，代碼簡明有序，有一個更好的前端架構。 基本準則：符合web標準，使用具有語義的標簽，使結構、表現、行為分離，相容性優良。頁面性能優化，代碼簡潔、明瞭、有序，儘可能的減少伺服器的負載，保證最 ...
  • angularjs小練習（分別通過ng-repeat和ng-option動態生成select下拉框）
    angularjs小練習（分別通過ng-repeat和ng-option動態生成select下拉框）,　　在實現上有兩種方式：其一、通過ng-repeat來實現;其二、通過ng-option來實現 ...
  • jsonp params 封裝
    import originJsonp from 'jsonp' export default function jsonp(url, data, option) { url += (url.indexOf('?') { originJsonp(url, option, (err, data) => ... ...
  • 消息提示框-事件冒泡
    1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>事件冒泡-提示框</title> 7 </head> 8 <style> 9 button { 10 width: 160px; 11 ...
  • 滑鼠點擊特效
    展示： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類