webpack5手動配置簡易vue3項目

前言

平時我老是用 vue/cli 直接建立 vue 項目，不多去了解內部構建流程，如今咱們從 0 開始，手動構建一個簡易 vue3 項目，說幹就幹！走起~

步驟

• 新建文件夾，並 npm 初始化

  npm init -y
  複製代碼

• 局部安裝 webpack 和 webpack-cli

  npm install webpack webpack-cli -D
  複製代碼

  個人版本以下圖

• 根目錄下新建 src 目錄和 index.html ,在 src 目錄下新建 main.js 和 App.vue 文件，目錄結構如圖

• 安裝 vue3

  npm install vue -save
  npm i @vue/compiler-sfc
  複製代碼

  若安裝的是vue2,可以使用 npm install vue@next -save 安裝 vue3

• 編寫 main.js 和 App.vue 文件

  src/App.vue
  
  <template>
    <div>
        Hello, Welcome to my blog
    <button @click="testFunction">點擊我</button>
    </div>
  </template>
  
  <script>
    export default {
        
    }
  </script>
  
  複製代碼

  src/main.js
  
  import { createApp } from 'vue' 
  import App from './App.vue' 
  
  const app = createApp(App) 
  app.mount('#root') 
  複製代碼

• 安裝 HtmlWebpackPlugin

  npm install --save-dev html-webpack-plugin
  複製代碼

  這是webpack plugins的內容，該插件能夠爲生成一個 HTML5 文件， 在 body 中使用 script 標籤引入你全部 webpack 生成的 bundle.js
  更多配置點擊這裏

• 安裝 vue-loader

  npm install vue-loader --save-dev
  複製代碼

  loader 也是webpack中重要的概念，默認webpack只會處理js代碼，因此當咱們想要去打包其餘內容時，讓webpack處理其餘類型的內容，就要使用相應的loader 更多內容點擊這裏

• 配置 webpack ，根目錄下新建 webpack.config.js 文件 （重點來了)

  const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const { VueLoaderPlugin } = require("vue-loader");
  
  module.exports = {
    mode: "development", // webpack 使用相應模式的內置優化
    entry: path.resolve(__dirname, "./src/main.js"),
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].js",
    },
  
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: "vue-loader",
        },
        
        // 應用到普通的 `.css` 文件
        // 以及 `.vue` 文件中的 `<style>` 塊
        {
          test: /\.css$/,
          use: ["vue-style-loader", {
              loader: 'css-loader',
              options: {
                // 開啓 CSS Modules
                modules: true,
              }
            }],
        },
  
        {
          test: /\.less$/,
          use: ["vue-style-loader", "css-loader", "less-loader"],
        },
  
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "./index.html"), // html 模板地址
        filename: "index.html", // 打包後輸出的文件名
        title: "手動搭建 Vue 項目",
      }),
      new VueLoaderPlugin(),
    ],
  };
  複製代碼

  • entry: 用於 webpack 查找開始構建，這裏入口爲src下面的main.js文件。因爲 vue 爲單頁應用，因此只有一個入口。可是webpack能夠配置多入口，點擊查看更多配置
  • output：規定如何輸出打包後的內容。
  • model：能夠對不一樣的文件編輯相應的打包規則
  • plugins：實例化相應的插件，同時能夠進行相應設置

• 編輯運行腳本，這樣能夠不用敲那麼多字。。。（偷懶是惟一輩子產力嘛）

  package.json
  
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack",
  },
  複製代碼

  運行 npm run build，找到/dist/index.html打開

  這個時候還沒完成，咱們還須要處理css和 es6+語法(es6+轉es5，便於大多數瀏覽器能識別)，這個時候須要css-loader和babel-loader

• 安裝 css-loader 和 babel-loader

  npm install css-loader style-loader babel-loader --save-dev
  複製代碼

  更新webpack.config.js配置

  const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const { VueLoaderPlugin } = require("vue-loader");
  
    module.exports = {
      mode: "development",
      entry: path.resolve(__dirname, "./src/main.js"),
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        assetModuleFilename: 'images/[hash][ext][query]'
      },
  
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: "vue-loader",
          },
          // 應用到普通的 `.css` 文件
          // 以及 `.vue` 文件中的 `<style>` 塊
          {
            test: /\.css$/,
            use: ["vue-style-loader", {
                loader: 'css-loader',
                options: {
                  // 開啓 CSS Modules
                  modules: true,
                }
              }],
          },
  
          {
            test: /\.less$/,
            use: ["vue-style-loader", "css-loader", "less-loader"],
          },
  
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
  
          {
              test: /\.jpg/,
              type: 'asset/resource'
          }
  
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "./index.html"), // html 模板地址
          filename: "index.html", // 打包後輸出的文件名
          title: "手動搭建 Vue 項目",
        }),
        new VueLoaderPlugin(),
      ],
    };
  
  複製代碼

• 安裝 webpack-dev-server

  咱們確定每次都要更改源代碼都要打包而後找到輸入文件手動打開，這個時候就須要一臺服務器來幫咱們完成這些事情，devServer利用 gzips 壓縮 dist/ 目錄當中的全部內容並提供一個本地服務(serve)

  npm i webpack-dev-server -D
  
  複製代碼

  更新webpack.config.js配置

  const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const { VueLoaderPlugin } = require("vue-loader");
  
  module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, "./src/main.js"),
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].js",
      assetModuleFilename: 'images/[hash][ext][query]'
    },
  
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: "vue-loader",
        },
        // 應用到普通的 `.css` 文件
        // 以及 `.vue` 文件中的 `<style>` 塊
        {
          test: /\.css$/,
          use: ["vue-style-loader", {
              loader: 'css-loader',
              options: {
                // 開啓 CSS Modules
                modules: true,
              }
            }],
        },
  
        {
          test: /\.less$/,
          use: ["vue-style-loader", "css-loader", "less-loader"],
        },
  
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
  
        {
            test: /\.jpg/,
            type: 'asset/resource'
        }
  
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "./index.html"), // html 模板地址
        filename: "index.html", // 打包後輸出的文件名
        title: "手動搭建 Vue 項目",
      }),
      new VueLoaderPlugin(),
    ],
  
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      compress: true,
      port: 9000,
    },
  };
  
  複製代碼

  如今咱們來測試一下這些功能，更新App.vue文件

  <template>
    <div>
        Hello, Welcome to my blog
        <button @click="testFunction">點擊我</button>
    </div>
  </template>
  
  <script>
  export default {
      setup() {
      const testFunction = () => {
        console.log('hi')
      }
      return {
        testFunction
      }
      }
  }
  </script>
  
  <style scoped>
      div{
          color: red;
      }
  </style>
  
  複製代碼

  更新package.json

  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack",
      "server": "webpack serve"
    },
  複製代碼

  執行 npm run server (大功告成）

最後

這個只是一個簡易的例子，還有不少未配置，如asset module、cache-loader等。文章還有不少細節我沒有過多敘述，由於我以爲官網上的更全更清晰，須要的能夠在這移步官網。