webpack4.x深入與實踐

Lsnsh 發布于2019-08-23 10:39 / 937人閱讀

摘要：它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。可以將多種靜態資源轉換成一個靜態文件，減少了頁面的請求。因此我們不再按文件文件的方式運行指令，而是直接運行這樣便能實現打包。

一、什么是webpack

是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。

二、安裝和命令行

2、安裝

全局安裝

在輸出版本時，顯示，要安裝webpack-cli

這樣就能輸出版本，可以看到我安裝的是4.2.0，這里要注意，自webpack4之后，使用有很大的變化

局部安裝

（1）練習（坑）：處理js文件，在項目根目錄下，新建hello.js，然后打包

顯示沒有配置webpack的mode選項，默認有production和development兩種，我們輸入

依然有錯：未找到入口模塊發成錯誤，

這是因為webpack4.x是以項目根目錄下的./src/index.js作為入口，所以我們要新建src目錄且改hello.js為index.js

這里還要注意：

webpack4.x的打包已經不能用webpack 文件a 文件b的方式，而是直接運行webpack --mode development或者webpack --mode production，這樣便會默認進行打包，入口文件是"./src/index.js"，輸出路徑是"./dist/main.js"，其中src目錄即index.js文件需要手動創建，而dist目錄及main.js會自動生成。

因此我們不再按webpack 文件a 文件b的方式運行webpack指令，而是直接運行

這樣便能實現打包。

每次這樣寫是不是都點麻煩，我們可以在package.json中

每次執行就可以：

（2）練習：處理css文件

新建一個css文件style.css，在index.js中引入

然后打包：

會報如上錯誤，是因為webpack不支持css文件類型，需要依賴loader

css-loader：使webpack可以處理css文件

style-loader：新建一個style標簽，把css-loader處理過的文件放進去，然后插入到HTML標簽中

安裝之后使用（直接在文件前）：

或者（在命令行）：

那每次更新都要執行一次，有沒有自動更新的？？？

（3）其他參數：

--progerss：會出現打包過程，有百分比進度條

--display-modules：會把所有打包的模塊列出來

--display-reasons：會把打包的原因列出來

三、webpack的配置

（1）新建一個項目并初始化

上面：將會打包。。。main.js文件到。。。bundle.js文件

多文件輸入：

四、自動生成HTML頁面文件

（1）安裝html-webpack-plugin插件

（2）在webpack配置package.config.js中

（3）傳參使用

1、參數

在根目錄下的index.html中

生成的dist/index.html中

2、上線地址

在生成的index.html中

3、html壓縮

4、多頁面應用，生成多個html文件

五、loader的配置

1、解析es6語法

（1）安裝babel

（2）配置webpack

2、解析css

（1）安裝style-loader和css-loader

（2）配置webpack

（3）在項目中經常有類似-webkit的前綴，每次寫很麻煩，這里就要用到postcss-loader,后處理loader

配置webpack

新建一個postcss.config.js文件和webpack.config.js同級

此時，如果你打包，并不會報錯，但是前綴可能也沒有，所以需要在package.json中加入

3、解析less

（1）安裝

（2）webpack的配置

4、解析sass
sass的使用和less一樣，只要把less改為sass就行了

5、處理html模板文件

（1）安裝html-loader

（2）配置

（3）使用

layer.js

app.js

6、使用ejs模板文件，后綴為tpl或ejs

（1）安裝

（2）配置

（3）使用

layer.tpl

layer.js

app.js

7、用file-loader處理圖片

（1）安裝

（2）配置

（3）使用

layer.less

若是在.tpl或.ejs中使用

（4）也可以加參數

8、使用url-loader處理圖片（會影響文件大小）

9、通過image-webpack-loader和url-loader結合：先有image-webpack-loader打包，在通過url-loader

云服務器 GPU云服務器微服務架構與實踐機器學習與業務實踐 javascript基礎與實踐教程網站運維技術與實踐

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

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

基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發環境配置，開箱即用，

摘要：開箱即用的多頁面腳手架基于模塊化開發可復用的現代化網站感興趣的朋友，請點個及時關注項目更新請點個項目請提特性支持前后端分離開發配置完整的打包方案支持本地開發熱更新集成代碼風格校驗支持編寫源碼，編譯生成生產代碼內置開發環境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發可復用的現代化網站(Without Vu...

junfeng777 2019-08-23 12:29 評論0 收藏0
webpack4.x升級摘要

摘要：以為例，編寫來幫助我們完成重復的工作編譯壓縮我只要執行一下就可以檢測到文件的變化，然后為你執行一系列的自動化操作，同樣的操作也發生在這些的預處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發展很久以前，互聯網行業有個職位叫做軟件開發工程師在那個時代，大家可能...

levinit 2019-08-23 18:11 評論0 收藏0
基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原鏈接基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 評論0 收藏0
基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原博文地址基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（...

Lavender 2019-08-26 10:37 評論0 收藏0
webpack4.x 模塊化淺析-CommonJS

摘要：先看下官方文檔中對模塊的描述在模塊化編程中，開發者將程序分解成離散功能塊，并稱之為模塊。每個模塊具有比完整程序更小的接觸面，使得校驗調試測試輕而易舉。先看下webpack官方文檔中對模塊的描述：在模塊化編程中，開發者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為模塊。每個模塊具有比完整程序更小的接觸面，使得校驗、調試、測試輕而易...

alphahans 2019-08-23 12:57 評論0 收藏0