資訊專欄INFORMATION COLUMN
摘要：獲取根目錄定義入口文件輸出路徑輸出文件名稱為中定義的值靜態(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://m.hztianpu.com/yun/109650.html
摘要：將熱重載的相關(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)...
摘要：在中，設(shè)置了一些配置，代碼如下通過它的注釋，我們可以理解它在中配置了靜態(tài)路徑本地服務(wù)器配置項(xiàng)等參數(shù)。下面還有一個(gè)的對(duì)象，它是在本地服務(wù)器啟動(dòng)時(shí)，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設(shè)置，壓縮等。 前言 這段時(shí)間，算是空出手來寫幾篇文章了。由于很久都沒有時(shí)間整理現(xiàn)在所用的東西了，所以，接下來會(huì)慢慢整理出一些文檔來記錄前段時(shí)間的工作和生活。 這篇文章的主...
摘要：根據(jù)模板插入等生成最終生成的存放路徑，相對(duì)于的路徑模板路徑插入的位置，路徑設(shè)置屬性，屬性值是所在的路徑。配置后，在使用時(shí)將不再需要和進(jìn)行引入，直接使用即可。 一 webpack.base.conf.js 1. entry 為入口文件 1.1 在此可以綁定 babel 墊片 處理ie兼容 1.2 我們大部分為單頁面應(yīng)用（SPA），配置多頁面也可以在此配置 2. resol...
摘要：一介紹是官方提供的腳手架，用來快速建立項(xiàng)目。標(biāo)識(shí)項(xiàng)目名稱，這個(gè)你可以根據(jù)自己的項(xiàng)目來起名字。初始化完成之后，進(jìn)入安裝目錄，必須先安裝項(xiàng)目依賴，否則無法運(yùn)行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。 一.介紹 vue-cli是官方提供的腳手架，用來快速建立項(xiàng)目。 二.安裝 npm install vue-cli -g//全局安裝 三.初始化項(xiàng)目 vue init ...
摘要：轉(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)做參考，也給自己記錄...
閱讀 2096·2021-11-08 13:14
閱讀 2995·2021-10-18 13:34
閱讀 2099·2021-09-23 11:21
閱讀 3659·2019-08-30 15:54
閱讀 1831·2019-08-30 15:54
閱讀 2994·2019-08-29 15:33
閱讀 2662·2019-08-29 14:01
閱讀 2018·2019-08-29 13:52
