vue-cli中配置webpack系列文章五 ------ webpack.base.conf.js

pinecone 發布于2019-08-26 13:50 / 3164人閱讀

摘要：獲取根目錄定義入口文件輸出路徑輸出文件名稱為中定義的值靜態資源路徑判斷目前所處的環境在開發環境下，路徑為根目錄在生產環境下，路徑為根目錄下的文件夾自動解析拓展，可以在引用文件的時候不用寫后綴配置別名，避免在結構嵌套過深的情況下出現這種寫法

webpack.base.conf.js

  var path = require("path")
  var utils = require("./utils")
  var config = require("../config")
  var vueLoaderConfig = require("./vue-loader.conf")
  // 獲取根目錄
  function resolve(dir) {
    return path.join(__dirname, "..", dir)
  }
  module.exports = {
    // 定義入口文件
    entry: {
      app: "./src/main.js"
    },
    output: {
      // 輸出路徑
      path: config.build.assetsRoot,
      // 輸出文件名稱（name為entry中定義的key值）
      filename: "[name].js",
      // 靜態資源路徑（判斷目前所處的環境）
      // 在開發環境下，路徑為根目錄
      // 在生產環境下，路徑為根目錄下的static文件夾
      publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    resolve: {
      // 自動解析拓展，可以在引用文件的時候不用寫后綴
      extensions: [".js", ".vue", ".json"],
      // 配置別名，避免在結構嵌套過深的情況下出現../../../../xxx這種寫法
      alias: {
        "vue$": "vue/dist/vue.esm.js",
        "@": resolve("src")
      }
    },
    module: {
      // 配置不同模塊處理規則
      rules: [{
        test: /.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      }, {
        test: /.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("test")]
      }, {
        // 對于圖片資源，當文件體積小于10kb時，將其生成為base64，直接插入html中
        // 當大于10kb時，將圖片名稱進行按照命名規則進行更改
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      }, {
        // 字體資源打包規則，與圖片資源相同
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      }]
    }
  }

GPU云服務器云服務器 webpack cdn配置 webpack配置cdn webpack常用配置項如何批量替換wordpress文章中的文

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109650.html

vue-cli中配置webpack系列文章六 ------ webpack.dev.conf.js

摘要：將熱重載的相關配置放入的每一項中，達到每一個文件都可以實現熱重載的目的這樣中選項就變成了如下調用方法，將基礎設置與開發設置進行合并的作用類似于少則添加，同則覆蓋在開發環境下生成，便于調試但是官方說的相對路徑有一個，所以暫 webpack.dev.conf.js var utils = require(./utils) var webpack = require(webpack)...

dreamtecher 2019-08-26 13:50 評論0 收藏0
vue-cli解析

摘要：在中，設置了一些配置，代碼如下通過它的注釋，我們可以理解它在中配置了靜態路徑本地服務器配置項等參數。下面還有一個的對象，它是在本地服務器啟動時，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設置，壓縮等。前言這段時間，算是空出手來寫幾篇文章了。由于很久都沒有時間整理現在所用的東西了，所以，接下來會慢慢整理出一些文檔來記錄前段時間的工作和生活。這篇文章的主...

KunMinX 2019-08-21 18:24 評論0 收藏0
vue-cli中配置webpack系列文章八 ------ 工程常用配置

摘要：根據模板插入等生成最終生成的存放路徑，相對于的路徑模板路徑插入的位置，路徑設置屬性，屬性值是所在的路徑。配置后，在使用時將不再需要和進行引入，直接使用即可。一 webpack.base.conf.js 1. entry 為入口文件 1.1 在此可以綁定 babel 墊片處理ie兼容 1.2 我們大部分為單頁面應用（SPA），配置多頁面也可以在此配置 2. resol...

netScorpion 2019-08-26 13:51 評論0 收藏0
vue學習系列（二）vue-cli

摘要：一介紹是官方提供的腳手架，用來快速建立項目。標識項目名稱，這個你可以根據自己的項目來起名字。初始化完成之后，進入安裝目錄，必須先安裝項目依賴，否則無法運行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。一.介紹 vue-cli是官方提供的腳手架，用來快速建立項目。二.安裝 npm install vue-cli -g//全局安裝三.初始化項目 vue init ...

baishancloud 2019-08-26 11:50 評論0 收藏0
vue-cli配置預編譯

摘要：轉載文章公司的平臺功能越堆越多，打包也越來越費勁，一次十幾分鐘，運維很不爽，搗鼓了一下預編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現在把它記下來，給需要的童鞋當做參考，也給自己記錄一下。 (轉載文章)公司的平臺功能越堆越多，打包也越來越費勁，一次十幾分鐘，運維很不爽，so搗鼓了一下預編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現在把它記下來，給需要的童鞋當做參考，也給自己記錄...

KnewOne 2019-08-22 18:13 評論0 收藏0