咕泡P6:Java網際網路高階架構師4期

語言: CN / TW / HK

時間 2022-01-09 21:18:41 51CTO博文

主題: Webpack Vue 軟體架構 Java

咕泡P6:Java網際網路高階架構師4期

webpack5簡單搭建vue專案

寫在前面

webpack 在當今的前端範疇曾經是不可缺失的一區域性了，不多說了，先理解一下 webpack 的四大中心

entry（入口）

entry 是一切的起點，經過 import 通知 webpack 援用了哪些模組

// index.js
import module from './module'
import './index.css'
import './index.scss'
module()
console.log(2222)
複製程式碼

loader

假如將非js檔案當作模組援用進來的時分， webpack 是不具備轉換非js檔案的，這時能夠經過 loader 把 css , scss 停止轉換， loader 是從下到上，從右到左編譯的

// webpack.config.js
module.exports = {
  mode:'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist'
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.scss$/,
        use:['style-loader','css-loader','sass-loader']
      }
    ]
  }
}
複製程式碼

plugin （外掛）

plugin 主要是對 loader 的一個擴充套件，經過 html-webpack-plugin 打包後會創立 html 檔案

const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack =require('webpack')
module.exports = {
  mode:'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist'
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.scss$/,
        use:['style-loader','css-loader','sass-loader']
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.md$/i,
        use: ["html-loader",'markdown-loader'],
      },
    ]
  },
  plugins:[
    new webpack.ProgressPlugin(), //打包進度報告
    new HtmlWebpackPlugin()
  ]
}
複製程式碼

output (出口)

望文生義就是打包後匯出的檔案在哪

好了根本的理解就到這如今我們能夠 從0搭建一個vue專案

從0搭建一個vue專案

題外話

沒學 webpack 之前，就在想 vue 是怎樣打包的，入口檔案只要一個 main.js ,而且單檔案裡面的 js , css 是如何獲取的，學了之後才發現原來有個 vue-loader 這個中心， vue 檔案的編譯都是基於這個中心

初始化專案

// 初始化專案 創立一個package.json
npm init -y 
// 裝置webpack
npm i webpack webpack -D
// 創立一個html模板
mkdir public && cd public
// 寄存開發檔案
mkdir src && cd src
複製程式碼

目錄構造如下

├── public                     # 靜態資源
│   └── index.html             # html模板
├── src 
    |—— main.js                # webpack入口檔案
複製程式碼

新建webpack.config.js

先配置一些根本的東西

// webpack.config.js
// 加上這個vscode會有提示
/** @type {import('webpack').Configuration} */
const path = require('path');
const webpack =require('webpack');
function resolve(dir) {
  return path.resolve(__dirname, dir)
}
module.exports = {
  mode: 'development',
  devtool: 'inline-source-map', // 提示哪行錯誤
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'static/js/[name].[contenthash].js',
    clean: true  // 打包肅清舊檔案
  },
 
  plugins: [
    new webpack.ProgressPlugin(), //打包進度報告
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
複製程式碼

根本配置寫好後，就能夠開端在 src 裡面寫 vue 的程式碼了，這裡需求 npm i vue 裝置好需求的開發的工具，然後寫好後我們來配置一下解析 vue 相關的內容，前面提到的重中之重，也就是中心 vue-loader

vue-loader

Vue Loader 是一個 webpack 的 loader，它允許你以一種名為單檔案元件 (SFCs)的格式撰寫 Vue 元件, 點選這裡 ,根本上看著文件來打包普通沒問題

裝置

npm i  vue-loader vue-template-compiler -D
複製程式碼

配置

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');
module.exports ={
// ...其他配置
module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
     //...其他外掛
    // 請確保引入這個外掛！
    new VueLoaderPlugin()
  ]
}
複製程式碼

這個根本的配置就曾經打包勝利了，這裡能夠經過裝置 webpack-dev-server 開啟一個效勞器看看效果

webpack-dev-server

創立一個運轉指令碼，運轉 npm run dev

"scripts": {
    "build": "webpack",
    "dev": "webpack serve --open" 
  },
複製程式碼

在 webpack.config.js 新增 devServer 配置

// webpack.config.js
module.exports ={
// ...其他配置
devServer: {
    static: './dist',  // 開啟的目的檔案
    hot: true,  // 開啟熱更新
  }
}
複製程式碼

就這一段程式碼是不是很簡單,在這裡一個根本的打包，構建曾經是能夠的了，如今我們再來加點東西

載入css csss 檔案

首先裝置 css-loader sass-loader sass

npm i css-loader sass-loader sass -D
複製程式碼

vue-style-loader 是 vue-loader 裡面自帶的 loader ,不需求額外引入

module: {
    rules: [
    // ...其他配置
        {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
}
複製程式碼
download

載入圖片

webpack5 裡面內建理解析圖片型別的，所以不需求我們額外裝置其他 loader

module: {
    rules: [
    // ...其他配置
        {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource', 
      }
    ]
}
複製程式碼

載入字型

module: {
    rules: [
    // ...其他配置
        {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },
    ]
}
複製程式碼

運用別名

假如運用 @/view/index 這種檔案途徑的需求設定別名

resolve: {
    alias: {
      '@': resolve('src')
    }
  }
複製程式碼

extensions省略檔案途徑

經過 extensions 能夠不用寫檔案字尾

resolve: {
    // ...其他配置
    extensions: ['.js', '.json', '.vue', 'css']
  }
複製程式碼

proxy代理

在開發環境中能夠經過 proxy 處置跨域

devServer: {
    // ...其他配置
    proxy: {
      '/api': {
        target: 'https://xxx.xxx',
        changeOrigin: true // 這個必需要寫
        }
    },
  },
複製程式碼

優化

美化打包進度條

想要花裡胡哨的進度條?? 這裡有

npm i progress-bar-webpack-plugin -D
複製程式碼

const ProgressBarPlugin =require('progress-bar-webpack-plugin')
plugins: [
     //...其他外掛
     new ProgressBarPlugin()
  ]
複製程式碼

打包輸出指定資料夾

經過 type:'asset/resource' 打包到指定資料夾裡面，這個相當於 file-loader ，能夠經過 generator 設定打包途徑

module: {
    rules: [
    // ...其他配置
        {
        type:'asset/resource',
        generator: {
          filename: 'static/資料夾稱號/[hash][ext][query]'
        }
      }
    ]
複製程式碼

es6轉es5

裝置 babel-loader

npm i  babel-loader @babel/core @babel/preset-env -D
複製程式碼

module: {
    rules: [
    // ...其他配置
        {
        test: /\.js$/,
        exclude:/node_modules/,  // 除去 node_modules
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 預設
          }
        }
      },
    ]
複製程式碼

完好程式碼

download

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve(dir) {
  return path.resolve(__dirname, dir)
}
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'static/js/[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.scss$/i,
        use: ['vue-style-loader', 'css-loader','sass-loader']
      },
      {
        test: /\.css$/i,
        use: ['vue-style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/img/[hash][ext][query]'
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/fonts/[hash][ext][query]'
        },
      },
    ],
  },
  plugins: [
    // 請確保引入這個外掛！
    new VueLoaderPlugin(),
    // new ProgressBarPlugin(), // 花裡胡哨的進度條
    new webpack.ProgressPlugin(), //打包進度報告
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: './dist',
    hot: true,
    proxy: {
      '/api': {
        target: 'http://xxx.xxx',
        changeOrigin: true
      }
    },
  },
  resolve: {
    extensions: ['.js', '.json', '.vue', 'css'],
    alias: {
      '@': resolve('src')
    }
  },
 
}

download

「其他文章」