亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

pinecone / 3203人閱讀

摘要：獲取根目錄定義入口文件輸出路徑輸出文件名稱為中定義的值靜態(tài)資源路徑判斷目前所處的環(huán)境在開發(fā)環(huán)境下，路徑為根目錄在生產(chǎn)環(huán)境下，路徑為根目錄下的文件夾自動(dòng)解析拓展，可以在引用文件的時(shí)候不用寫后綴配置別名，避免在結(jié)構(gòu)嵌套過深的情況下出現(xiàn)這種寫法

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",
      // 靜態(tài)資源路徑（判斷目前所處的環(huán)境）
      // 在開發(fā)環(huán)境下，路徑為根目錄
      // 在生產(chǎn)環(huán)境下，路徑為根目錄下的static文件夾
      publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    resolve: {
      // 自動(dòng)解析拓展，可以在引用文件的時(shí)候不用寫后綴
      extensions: [".js", ".vue", ".json"],
      // 配置別名，避免在結(jié)構(gòu)嵌套過深的情況下出現(xiàn)../../../../xxx這種寫法
      alias: {
        "vue$": "vue/dist/vue.esm.js",
        "@": resolve("src")
      }
    },
    module: {
      // 配置不同模塊處理規(guī)則
      rules: [{
        test: /.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      }, {
        test: /.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("test")]
      }, {
        // 對(duì)于圖片資源，當(dāng)文件體積小于10kb時(shí)，將其生成為base64，直接插入html中
        // 當(dāng)大于10kb時(shí)，將圖片名稱進(jìn)行按照命名規(guī)則進(jìn)行更改
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      }, {
        // 字體資源打包規(guī)則，與圖片資源相同
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      }]
    }
  }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109650.html

相關(guān)文章

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

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

    dreamtecher 評(píng)論0 收藏0

  • vue-cli解析

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

    KunMinX 評(píng)論0 收藏0

  • vue-cli中配置webpack系列文章八 ------ 工程常用配置

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

    netScorpion 評(píng)論0 收藏0

  • vue學(xué)習(xí)系列（二）vue-cli

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

    baishancloud 評(píng)論0 收藏0

  • vue-cli配置預(yù)編譯

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

    KnewOne 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<