webpack原理及使用解析

doodlewind 發布于2019-08-23 17:01 / 1924人閱讀

摘要：二打包原理和組成。標識打包結束的導出文件路徑和文件名。可以執行范圍更廣的任務后續更新可以選擇和模式，內部會進行相應的優化。項目中使用本地調試，配置跨域請求配置服務器域名配置屬于模塊，配置服務器域名其中請求接口實例瀏覽器請求鏈接

webpack是JavaScript前端靜態資源打包器（module bundler）。

一、實例應用
①首先安裝webpack（可以全局安裝，也可以局部安裝）

全局：cnpm install -g webpack
局部：cnpm install --save-dev webpack

②安裝webpack-cli（webpack4+需要，用于在命令行運行webpack）

npm install --save-dev webpack-cli

③創建package.json文件（NPM的標準說明文件，包含項目的基本信息、模塊依賴、運行的腳本信息）

cnpm init（執行時，需要數據項目的相關信息，可跳過）
cnpm init -y（全都默認）

④創建webpack.config.js文件（webpack的配置文件，需手動創建，可在任何位置，一般在整個文件夾的首層子目錄）

一個簡單的webpack.config.js配置：

module.exports = {
  entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"http://打包后輸出文件的文件名
  }
}

⑤入口文件main.js（作為入口文件，里面寫入需要依賴的模塊。。。鏈式依賴）

一個簡單的main.js文件：

const greeter = require("./Greeter.js");//main.js依賴的模塊，Greeter.js依次鏈式依賴下去
document.querySelector("#root").appendChild(greeter());

⑥執行打包
運行webpack命令，即可執行webpack.config.js
簡潔的執行打包命令，需要在pakeage.json中的script屬性中配置：
一個簡單的package.json配置文件

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是這里，JSON文件不支持注釋，引用時請清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

npm的start命令是個特殊的命令，可直接執行npm start，一般情況下執行腳本命令的格式是 npm run {script name}例如npm run bulid。

二、webpack打包原理和組成。

webpack由四個核心概念：入口(entry)、出口(output)、loader、插件(plugins)。

entry：表示webpack打包開始的入口文件。
output：標識webpack打包結束的導出文件（路徑和文件名）。
loader：轉換非JavaScript文件（webpack只能識別js文件），如Typescript、css、scss等，可配置對某一文件類型做具體的loader轉化。
plugins：可以執行范圍更廣的任務（后續更新……）
module：可以選擇development和production模式，webpack內部會進行相應的優化。

項目中使用
1??本地調試，配置跨域請求
vue2:
config-->index.js配置

module.exports = {
    dev: {
        assetsSubDirectory: "static",
        assetsPublicPath: "/",
        proxyTable: {
            "/baseURL/": {
                target: "http://110.221.9.210:8090",//服務器域名
                changeOrigin: true,
                pathRewrite: {
                    "^/baseURL": "baseURL"
                }
            }
        },
        host: "localhost",
        port: 8080,
    }
}

build-->webpack.base.conf.js配置

module.exports = {
    entry: {},
    output: {},
    resolve: {
        extensions: [".js",".vue",".json"],
        alias: {
            "@": resolve("src")//resolve屬于path模塊，path.resolve()
        }
    }
}

vue3:
vue.config.js配置

let path = require("path");
function resolve(dir){
    return path.join(_dirname, dir)
}
module.exports = {
    devServer: {
        proxy: {
            "/baseURL": {
                target: "http://110.221.9.210:8090",//服務器域名
                changeOrigin: true,
                pathRewrite: {
                    "^/baseURL": "baseURL"
                }
            }
        }
    },
    chainWebpack: config => {
        config.resolve.alias
        .set("@",resolve("src"))
    }
}

其中axios.default.baseURL = "/baseURL"
請求接口實例：
this.$axios.get("/urlLev1／urlLev2/info.json").then(……)
瀏覽器請求鏈接：http://110.221.9.210:8090／baseURL／urlLev1／urlLev2/info.json

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

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

最全的前端模塊化方案

摘要：模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復雜的系統分解為多個模塊以方便編碼。順手寫一個省略省略實現此時的對應的形式解析省略執行兼容，模塊化語法。模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復雜的系統分解為多個模塊以方便編碼。會講述以下內容 CommonJS AMD 及核心原理實現 CMD 及核心原理實現 UMD 及源碼解析 ES6...

antz 2019-08-23 17:07 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
【進階3-5期】深度解析 new 原理及模擬實現

摘要：使用指定的參數調用構造函數，并將綁定到新創建的對象。由構造函數返回的對象就是表達式的結果。情況返回以外的基本類型實例中只能訪問到構造函數中的屬性，和情況完全相反，結果相當于沒有返回值。定義 new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。 ——（來自于MDN）舉個栗子 function Car(color) { this.color = co...

Baaaan 2019-08-23 14:31 評論0 收藏0