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

語言: CN / TW / HK

咕泡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​