使用 webpack 手動搭建 vue 專案

Tuzilow發表於2020-12-07

WebVue

webpack 是一個前端工程化打包工具，對於前端工程師來說 webpack 是一項十分重要的技能。下面我們就通過搭建一個 vue 專案來學習使用 webpack

主要環境：

node v14.15.0
npm v6.14.9
webpack v5.10.0
webpack-cli v4.2.0
vue v2.6.12

本專案實現以下功能：

與vue/cli類似的基本目錄
支援*.vue,*.css等檔案
支援es6及以上語法
支援載入圖片
熱載入

構建專案基本目錄

執行npm init並建立以下目錄

demo
├─ dist
├─ public
└─ src

安裝必要依賴

webpack 及相關外掛

webpack npm install -D webpack webpack-cli
webpack 本地伺服器外掛 npm install -D webpack-dev-server
html 生成外掛，它會將生成的 js 和 css 檔案插入到 html 中 npm install -D html-webpack-plugin
vue 外掛 npm install -D vue-loader vue-template-compiler
css 外掛 npm install -D css-loader style-loader
圖片外掛 npm install -D file-loader url-loader
babel 外掛 npm install -D @babel/core @babel/cli @babel/preset-env babel-loader, npm install @babel/polyfill

安裝 vue

npm install vue vue-router

搭建專案

簡單實現 webpack 打包

新建src/main.js，並寫入：

console.log('Hello Webpack');

根目錄下新建webpack.config.js，並寫入：

const path = require('path');

const config = {
  entry: './src/main.js', // 定義入口檔案
  output: {
    path: path.resolve(__dirname + '/dist'), // 打包生成檔案地址，必須是絕對路徑
    filename: '[name].build.js', // 生成的檔名
  },
};
module.exports = config;

在package.json中的scripts中新增一個指令碼：

{
  ...
  "scripts": {
    "build": "webpack --mode=production"
  }
  ...
}

在命令列中執行npm run build，此時專案目錄中出現了dist/main.build.js，證明執行成功

js 檔案打包成功後，需要一個 html 檔案來引入這個 js 檔案，這就需要用到我們一開始下載的html-webpack-plugin

首先新建public/index.html建立一個基礎頁面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack搭建vue</title>
  </head>
  <body>
    <!-- 如果瀏覽器禁止載入js指令碼 -->
    <noscript>
      <strong>
        We're sorry but this site doesn't work properly without JavaScript
        enabled. Please enable it to continue.
      </strong>
    </noscript>

    <div id="app"></div>
    <!-- build後的檔案會在這之後自動引入 -->
  </body>
</html>

在public下隨便放入一個圖示favicon.ico，然後在webpack.config.js中配置外掛：

const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  ...
  plugins:[
     new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的資料夾名
      template: 'public/index.html', // 模板html
      favicon: 'public/favicon.ico', // 圖示
    }),
  ]
}
...

之後再次執行npm run build，dist下會生成index.html，favicon.ico，main.build.js三個檔案，通過瀏覽器開啟index.html，就可以發現控制檯輸出了Hello Webpack，頁面圖示也變成了自己設定的圖示，通過編輯器開啟index.html，我們會發現 webpack 幫助我們自動引入了favicon.ico和main.build.js：

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="icon" href="favicon.ico" />
  </head>
  <body>
    ...
    <script src="main.build.js"></script>
  </body>
</html>

開啟熱載入

webpack 熱載入需要用到webpack-dev-server，在開始我們已經安裝過了，在webpack.config.js中配置：

const config = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // html所在路徑
    compress: true, // 是否壓縮
    port: 3000, // 埠
    hot: true, // 熱部署
    open: true, // 打包完成後自動開啟網頁
  }
}

增加package.json指令碼：

{
  ...
  "scripts": {
    "build": "webpack --mode=production",
    "serve": "webpack serve"
  }
  ...
}

執行npm run serve，打包成功後會自動開啟網頁，並且當你修改src/main.js或src/index.html的內容的時候，瀏覽器會自動重新打包並重新整理

配置 Vue

讓 webpack 打包*.vue檔案需要vue-loader和vue-template-compiler，同時為了 webpack 能夠解析 vue 中的 css 還需要用到css-loader和vue-style-loader，在webpack.config.js配置以上外掛：

...
const { VueLoaderPlugin } = require('vue-loader');

const config = {
  ...
  // loaders
  module: {
    rules: [
      {
        // *.vue
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        // `*.vue` 檔案中的 `<style>` 塊以及普通的`*.css`
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    ...
    new VueLoaderPlugin(),
  ],
  ...
};
...

配置完後新建src/App.vue:

<template>
  <div class="example">
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Webpack',
    };
  },
};
</script>

<style>
.example {
  color: red;
}
</style>

修改src/main.js:

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

new Vue({
  el: '#app',
  render: (h) => h(App),
});

然後執行npm run serve，即可看到頁面上顯示的Hello Webpack

配置圖片資源的載入

使用file-loader或url-loader載入，它們都是用於打包檔案和圖片資源的，區別在於url-loader封裝了file-loader

在訪問網站時如果圖片較多，會發很多 http 請求，會降低頁面效能。這個問題可以通過 url-loader 解決。url-loader 會將引入的圖片編碼，生成 dataURl。相當於把圖片資料翻譯成一串字元,再把這串字元打包到檔案中，最終只需要引入這個檔案就能訪問圖片了。
當然，如果圖片較大，編碼會消耗效能。因此 url-loader 提供了一個 limit 引數，小於 limit 位元組的檔案會被轉為 DataURl，大於 limit 的還會使用 file-loader 進行 copy。
此處我們使用 url-loader,由於它是基於 file-loader 的封裝，所以也需要引入 file-loader。

...
const config = {
  ...
  module: {
    rules: [
      ...
      {
        // 圖片
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 25000,
          },
        },
      },
    ],
  },
};
...

然後新增一個圖片src/assets/logo.png，在App.vue中引入：

<template>
  <div class="example">
    {{ msg }}
    <img :src="url" />
  </div>
</template>

<script>
import logo from './assets/logo.png';

export default {
  data() {
    return {
      msg: 'Hello Vue1',
      url: logo,
    };
  },
};
</script>

<style>
.example {
  color: red;
}
</style>

再次npm run serve即可看到圖片

配置 babel

babel 可以將 js 的高版本(es6)語法轉換為低版本，使得專案相容低版本瀏覽器

需要我們注意的是，babel7 與 babel6 不相容，因此需要使用最新版本的 babel 和 babel 外掛，在前面文章開始我們已經安裝了 babel7 版本的 babel 外掛，下面我們在webpack.config.js中配置它：

...
const config = {
  ...
  module: {
    rules: [
      ...
      {
        // *.js
        test: /\.js$/,
        exclude: /node_modules/, // 不編譯node_modules下的檔案
        loader: 'babel-loader',
      },
    ],
  },
};
...

配置完後在專案根目錄下建立一個 babel 的配置檔案.babelrc，寫入如下內容：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

更多 babel 配置請檢視babel 中文官網

配置完成後新建一個src/utils/getData.js測試一下：

export default function getData() {
  return new Promise((resolve, reject) => {
    resolve('ok');
  });
}

在src/App.vue中引入：

<template>
  <div class="example">
    {{ msg }}
    <img :src="url" />
  </div>
</template>

<script>
import logo from './assets/logo.png';
import getData from './utils/getData';

export default {
  data() {
    return {
      msg: 'Hello Vue1',
      url: logo,
    };
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.msg = data;
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style>
.example {
  color: red;
}
</style>

重新執行npm run serve後，頁面顯示ok，babel 引入成功

設定 src 別名以及省略字尾

為了方便開發，我們可以給 src 目錄設定別名，以及將常用檔案型別的字尾省略

...
const config = {
  ...
  // 解析路徑
  resolve: {
    // 設定src別名
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    //字尾名 可以根據需要自由增減
    extensions: ['.js', '.vue'],
  },
  ...
};
...

這樣我們就可以以如下方式匯入 vue 和 js 檔案：

// 匯入App.vue
import App from '@/App';
// 匯入getData
import getData from '@/utils/getData';

至此，我們已經簡單的搭建出了 vue 專案，在專案中我們可能還會需要用到less,sass,字型圖示等工具，針對這類工具 webpack 都有與其對應的loader或plugin，需要時搜尋他們的文件即可。

本專案倉庫 Tuzilow/webpack-vue

參考文章

使用webpack搭建vue專案
2019-06-10
WebVue
webpack 搭建 vue 專案
2017-12-27
WebVue
webpack初步搭建Vue專案
2018-11-19
WebVue
Webpack4 搭建 Vue 專案
2018-08-22
WebVue
使用腳手架搭建VUE專案
2018-08-07
Vue
使用webpack 手動建立新react專案
2017-09-12
WebReact
(轉載)手工搭建webpack+vue專案
2019-03-28
WebVue
使用vue-cli搭建VUE專案
2018-08-07
Vue
9102年webpack4搭建vue專案
2019-02-19
WebVue
分析vue-cli@2.9.3 搭建的webpack專案工程
2018-06-11
VueWeb
9102年webpack4搭建vue專案（二）
2019-04-29
WebVue
【 Vue 】 Vue 使用腳手架建立專案
2020-11-28
Vue
Vue+webpack搭建自己的腳手架
2019-03-24
VueWeb
用腳手架搭建一個 vue 專案
2021-02-28
Vue
自己搭建一個vue專案(腳手架)
2018-05-28
Vue
不借助腳手架手動搭建react專案（webpack5 + Antd4 + React18）
2023-02-24
ReactWeb
使用webpack.require優化vue專案的路由
2018-03-26
WebUI優化Vue路由
vue專案的搭建
2017-10-13
Vue
從零開始使用 webpack5 搭建 react 專案
2021-02-28
WebReact
用webpack搭建多頁面專案
2017-11-17
Web
從搭建vue-腳手架到掌握webpack配置（四.自動化封裝）
2018-02-14
VueWeb封裝
webpack練手專案之easySlide（一）：初探webpack
2015-11-30
WebIDE
Vue-CLI 專案搭建
2022-04-18
Vue
Vue搭建專案環境
2018-11-27
Vue
用webstorm搭建vue專案
2019-01-04
WebORMVue
Vue專案搭建 + 引入ElementUI
2018-11-06
VueUI
vue cli 快速搭建專案
2018-04-04
Vue
webpack 4 ：從0配置到專案搭建
2018-07-05
Web
深入淺出 webpack(vue 專案優化)
2020-01-10
WebVue優化
webpack4構建vue專案（二）
2019-04-22
WebVue
Vue SPA 專案webpack打包優化指南
2018-10-26
VueWeb優化
提高 webpack 構建 Vue 專案的速度
2017-04-05
WebVue
如何在webpack+vue專案中使用postcss-px2rem
2018-06-27
WebVueCSSREM
如何搭建一個vue專案
2023-05-17
Vue
Vue3的專案搭建
2024-10-04
Vue
vue+webpack搭建單檔案應用和多檔案應用webpack.con
2021-09-09
VueWeb
基於 Webpack 4 和 React hooks 搭建專案
2019-02-04
WebReactHook
使用webpack建立vue專案，安裝vue-router和不安裝vue-router的區別
2017-07-04
WebVue