使用 webpack 手動搭建 vue 項目

時間  2020-12-08
標籤 javascript css html 前端 vue java node webpack git es6 欄目 JavaScript 简体版
原文   原文鏈接

webpack 是一個前端工程化打包工具，對於前端工程師來講 webpack 是一項十分重要的技能。下面咱們就經過搭建一個 vue 項目來學習使用 webpackjavascript

主要環境：css

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

本項目實現如下功能：html

  • 與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，並寫入：vue

console.log('Hello Webpack');

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

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中添加一個腳本：node

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

在命令行中執行npm run build，此時項目目錄中出現了dist/main.build.js，證實執行成功webpack

js 文件打包成功後，須要一個 html 文件來引入這個 js 文件，這就須要用到咱們一開始下載的html-webpack-plugingit

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

<!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，須要時搜索他們的文檔便可。

參考文章

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程