国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack4基礎(chǔ)配置

PiscesYE / 3501人閱讀

摘要：能自動尋找到瀏覽器不能識別的語言，進(jìn)行兼容處理。會從配置的開始遞歸找出所有依賴的模塊。代碼塊，一個由多個模塊組合而成，用于代碼合并與分割。輸出結(jié)果，在經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果。

網(wǎng)頁中常見的靜態(tài)資源：

js: .js .jsx .coffee .ts（TypeScript 類 C# 語言）

css： .css .less .sass .scss

Images: .jpg .png .gif .bmp .svg

Fonts: .svg .ttf .eot .woff .woff2

Template: .ejs .jade .vue

網(wǎng)頁中引入較多的靜態(tài)資源會使網(wǎng)頁的加載速度變慢(要發(fā)起很多的二次請求)，并且還要處理復(fù)雜的依賴關(guān)系

webpack概念：

是一個前端自動化構(gòu)建工具，基于node.js 開發(fā)的前端工具，可以完美的實現(xiàn)資源的合并，打包，壓縮等功能。能自動尋找到瀏覽器不能識別的語言，進(jìn)行兼容處理。默認(rèn)只能打包js

webpack核心概念

Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始，可抽象成輸入。

Module：模塊，在 Webpack 里一切皆模塊，一個模塊對應(yīng)著一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。

Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用于代碼合并與分割。

Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。

Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時機(jī)注入擴(kuò)展邏輯來改變構(gòu)建結(jié)果或做你想要的事情。

Output：輸出結(jié)果，在 Webpack 經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果。

mode: 模式，選擇development 或者production

配置webpack環(huán)境：

1、全局安裝 npm install webpack webpack-cli webpack-dev-server -g

2、 創(chuàng)建項目文件夾，例如文件夾名稱為vue，在文件夾中創(chuàng)建兩個文件夾，分別文dist和src

3、輸入命令npm init -y ，初始化文件包，會生成一個package.json 文件，注意不要隨意修改此文件，后續(xù)步驟再進(jìn)行配置

4、安裝相應(yīng)的所需模塊，例如npm i jquery -S 安裝 jQuery

5、在文件包的根目錄下面創(chuàng)建文件webpack.config.js文件，在src中創(chuàng)建main.js 、index.html文件，分別寫入相應(yīng)的調(diào)試代碼。

6、配置webpack.config.js文件

7、修改package.json的配置

--open 設(shè)定自動打開項目

--port 3000 指定端口為3000

--contentBase src 指定啟動的根目錄，會自動打開根目錄中的index.html文件，啟用過程比較繁瑣，建議用html-webpack-plugin 插件配置啟動頁面

--hot 啟用瀏覽器熱更新

8、運(yùn)行 npm run dev ，會自動打開index.html，在dist目錄下并不會看到bundle.js ,但是在index.html中引入，會生效，則打包成功，在這里bundle.js直接托管到電腦的內(nèi)存中，雖然看不到，但是確實存在，它和dist平級

*

html-webpack-plugin插件配置：

1、運(yùn)行 npm i html-webpack-plugin --save-dev 安裝到開發(fā)依賴

2、在webpack.config.js文件中需要先引入模塊，然后再進(jìn)行配置，注意，前面我們安裝的webpack為全局的，這里就會報錯

因為本地找不到webpack，所以可以再執(zhí)行npm install webpack安裝本地包，在webpack.config.js加入下面代碼

可以更改filename的值，查看物理磁盤的頁面和內(nèi)存里的頁面的區(qū)別，可以發(fā)下內(nèi)存磁盤的html文件body的底部生成了一個script標(biāo)簽，引入了bundle.js

因此可以將物理頁面的注釋掉，也不會影響頁面效果，也就是使用html-webpack-plugin插件之后，不需要手動處理bundle.js的引入，插件會自動幫我們創(chuàng)建script標(biāo)簽，引入正確的bundle.js

使用webpack打包css:

webpack只能打包js文件，要打包其他文件需要安裝其他模塊

1、運(yùn)行 npm i style-loader css-loader --save-dev

2、修改webpack.config.js文件的配置

使用webpack打包less: (sass的打包和less的類似 npm i sass-loader node-sass --save-dev)

1、運(yùn)行 npm i less-loader less -D

2、修改webpack.config.js文件的配置

使用webpack打包url地址文件:

1、運(yùn)行 npm i url-loader file-loader --save-dev

2、修改webpack.config.js文件的配置 {test:/.jpg|png|gif|jpeg$/, use: "url-loader" } //處理圖片路徑的規(guī)則

webpack.config.js文件的配置

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53113.html

相關(guān)文章

  • 進(jìn)擊webpack4 （基礎(chǔ)篇三：配置 二）

    摘要：多頁面配置進(jìn)擊基礎(chǔ)篇一進(jìn)擊基礎(chǔ)篇二配置多頁面配置多頁面配置即是多入口需要寫成對象形式，注意數(shù)組形式會變成多入口單頁面，因為打包之后的會合并成一個入口文件出口不能寫同一個文件用代替以上配置并不能多頁面，還需要個模板，并且指明各自的代碼塊去生成 多頁面配置 進(jìn)擊webpack 4 （基礎(chǔ)篇一） 進(jìn)擊webpack4 （基礎(chǔ)篇二：配置） ## 多頁面配置 ## 多頁面配置即是多入口 entr...

    sourcenode 評論0 收藏0

  • 基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發(fā)環(huán)境配置，開箱即用，

    摘要：開箱即用的多頁面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友，請點個及時關(guān)注項目更新請點個項目請?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風(fēng)格校驗支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...

    junfeng777 評論0 收藏0

  • webpack4 系列教程: 前言

    摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續(xù)更新。個人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過時，最近內(nèi)容請看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發(fā)者可以輕松地實現(xiàn)加密代碼、多平臺兼容。而最重要的...

    DevWiki 評論0 收藏0

  • 超級詳細(xì)的手寫webpack4配置來啟動vue2項目（附配置作用）

    摘要：基礎(chǔ)目錄結(jié)構(gòu)以及各個文件的作用初始項目一路回車，一律使用默認(rèn)的項目配置修改如下超級詳細(xì)的手寫配置來啟動項目附配置作用說明用來啟動命令這里將開發(fā)環(huán)境的配置傳入到啟動的中。 基礎(chǔ)目錄結(jié)構(gòu)以及各個文件的作用 showImg(https://segmentfault.com/img/remote/1460000018271585?w=538&h=284); 初始npm項目 npm init 一...

    only_do 評論0 收藏0

  • 超級詳細(xì)的手寫webpack4配置來啟動vue2項目（附配置作用）

    摘要：基礎(chǔ)目錄結(jié)構(gòu)以及各個文件的作用初始項目一路回車，一律使用默認(rèn)的項目配置修改如下超級詳細(xì)的手寫配置來啟動項目附配置作用說明用來啟動命令這里將開發(fā)環(huán)境的配置傳入到啟動的中。 基礎(chǔ)目錄結(jié)構(gòu)以及各個文件的作用 showImg(https://segmentfault.com/img/remote/1460000018271585?w=538&h=284); 初始npm項目 npm init 一...

    mtunique 評論0 收藏0

發(fā)表評論

0條評論

PiscesYE

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<