使用 webpack 手動搭建 vue 專案-有解無憂

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="https://www.cnblogs.com/xueyubao/p/favicon.ico" />
  </head>
  <body>
    ...
    <script src="https://www.cnblogs.com/xueyubao/p/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 >
    {{ 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 >
    {{ msg }}
    <img :src="https://www.cnblogs.com/xueyubao/p/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 >
    {{ msg }}
    <img :src="https://www.cnblogs.com/xueyubao/p/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 = https://www.cnblogs.com/xueyubao/p/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 中文檔案
webpack4 練手專案-搭建 Vue 專案
使用 Webpack 與 Babel 配置 ES6 開發環境

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/231402.html

標籤：JavaScript

上一篇：【webpack系列】webpack小老弟打包大專案

下一篇：TypeScript—型別定義檔案（*.d.ts）