webpack基本應用

Jackwoo 發布于2019-08-22 18:33 / 785人閱讀

摘要：介紹官網入門文檔本質上，是一個現代應用程序的靜態模塊打包器。當處理應用程序時，它會遞歸地構建一個依賴關系圖，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個模塊。

介紹

官網：https://www.webpackjs.com/
入門文檔：http://www.runoob.com/w3cnote...
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle（模塊）。

簡言之就是把各個JS CSS IMG 都進行打包合并，最終項目只需引用一個build.min.js文件即可

安裝

打開控制器，進入到項目根目錄：

npm install webpack -g （-g是全局安裝）

npm init （初始化項目）

npm install webpack -g （安裝webpack）
npm install webpack-command -g （安裝webpack的依賴項）

最簡單實例

創建mydemo目錄,并在該目錄下創建如下結構：
mydemo
--dist
--src
----js
------index.js
----css
------app.css
----img
------1.jpg
--webpack.config.js
--index.html

index內容:

webpack.config.js內容：

module.exports = {
    mode: "production",
    entry: [
        "./src/js/index.js"
    ],
    output: {
        filename: "build.min.js"
    },
}

src/js/index.js：

document.write("It works.");

運行：

webpack

瀏覽器訪問index.html

CSS加載打包

這里需要用到webpack的加載器
npm install -g css-loader style-loader

src/css/app.css:

src/js/index.js:

webpack.config.js文件配置：

運行：webpack

CSS中引入IMG加載打包

用到兩個加載器
npm install url-loader -g
npm install file-loader -g

CSS中引入圖片要注意從根目錄寫了，而不能用../

src/css/app.css:

webpack.config.js文件配置：

運行webpack:

這里的圖片資源路徑可以搭配CDN使用

HTML中引入IMG加載打包

npm install html-withimg-loader -g

webpack.config.js文件配置：

index.html:

運行webpack:

實施刷新（監聽）

npx webpack --mode development --watch

一旦修改源文件，會看到控制臺顯示

此時再刷新瀏覽器就會看到新的修改

云服務器 GPU云服務器阿里云盾web應用防火墻的基本功能 webpack _webpack webpack cdn

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

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

Webpack基本功能理解以及使用

摘要：在這個過程中，會用到一些解析工具用來預處理一些模塊以及拓展語言例如這些工具的配置使用都是在中完成的。屬性，表示進行轉換時，應該使用哪個。插件接口功能極其強大，可以用來處理各種各樣的任務。對于前端工程化，webpack一個神奇的工具，既然是個神奇的工具。那我們保留我們的好奇心，來聊一聊它，首先我們要搞清楚webpack到底是用來解決什么問題的，然后我們來看看它到底是怎么做的，最后來看看...

KnewOne 2019-08-26 10:09 評論0 收藏0
Webpack的坑位整理

摘要：在尋找相對路徑的文件時會以為根目錄，默認為執行啟動時所在的當前目錄。在文件被添加到依賴圖中時，將其轉換稱為了模塊。配置中的兩個目標。僅限高級用途，默認情況下自動生成生成文件的文件名。webpack webpack現在是主要的打包工具了，現在網絡上也有很多資料可以學習了。這里主要整理了一些基礎概念，但沒有所有的寫，只是把之前遇到的問題記錄了一下。本文的原文在我的博客中：github.com...

lidashuang 2019-05-23 17:34 評論0 收藏0
webpack配合vue.js實現完整的單頁面demo

摘要：本篇文章主要是我在開發前研究了的單頁面應用，因為需要用到的，所以確保安裝了，建議官網安裝最新的穩定版本。本文章只是和大家探討怎么利用配合做一個單頁面應用，具體關于里面的內容怎么寫并不在本篇文章的介紹范圍。本篇文章主要是我在開發前研究了webpack+vue.js的單頁面應用，因為需要用到node的npm，所以確保安裝了node，建議官網安裝最新的穩定版本。并且在項目中需要加載一些np...

2450184176 2019-08-19 18:35 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（上）

摘要：初始項目設置我們將使用包管理器來處理依賴項。使用包管理器可以使您的項目依賴項保持最新狀態，并能夠獲取和安裝最新的包。是小型應用的最佳選擇之一。翻譯：瘋狂的技術宅英文標題：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

wizChen 2019-08-21 11:59 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（上）

摘要：初始項目設置我們將使用包管理器來處理依賴項。使用包管理器可以使您的項目依賴項保持最新狀態，并能夠獲取和安裝最新的包。是小型應用的最佳選擇之一。翻譯：瘋狂的技術宅英文標題：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

Doyle 2019-07-30 14:29 評論0 收藏0