webpack4基礎配置

PiscesYE 發布于2019-08-02 11:46 / 3495人閱讀

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

網頁中常見的靜態資源：

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

網頁中引入較多的靜態資源會使網頁的加載速度變慢(要發起很多的二次請求)，并且還要處理復雜的依賴關系

webpack概念：

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

webpack核心概念

Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。

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

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

Loader：模塊轉換器，用于把模塊原內容按照需求轉換成新內容。

Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或做你想要的事情。

Output：輸出結果，在 Webpack 經過一系列處理并得出最終想要的代碼后輸出結果。

mode: 模式，選擇development 或者production

配置webpack環境：

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

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

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

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

5、在文件包的根目錄下面創建文件webpack.config.js文件，在src中創建main.js 、index.html文件，分別寫入相應的調試代碼。

6、配置webpack.config.js文件

7、修改package.json的配置

--open 設定自動打開項目

--port 3000 指定端口為3000

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

--hot 啟用瀏覽器熱更新

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

html-webpack-plugin插件配置：

1、運行 npm i html-webpack-plugin --save-dev 安裝到開發依賴

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

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

可以更改filename的值，查看物理磁盤的頁面和內存里的頁面的區別，可以發下內存磁盤的html文件body的底部生成了一個script標簽，引入了bundle.js

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

使用webpack打包css:

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

1、運行 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、運行 npm i less-loader less -D

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

使用webpack打包url地址文件:

1、運行 npm i url-loader file-loader --save-dev

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

webpack.config.js文件的配置

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

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

進擊webpack4 （基礎篇三：配置二）

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

sourcenode 2019-08-23 15:28 評論0 收藏0
基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發環境配置，開箱即用，

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

junfeng777 2019-08-23 12:29 評論0 收藏0
webpack4 系列教程: 前言

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

DevWiki 2019-08-23 10:25 評論0 收藏0
超級詳細的手寫webpack4配置來啟動vue2項目（附配置作用）

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

only_do 2019-08-23 15:25 評論0 收藏0
超級詳細的手寫webpack4配置來啟動vue2項目（附配置作用）

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

mtunique 2019-08-02 14:19 評論0 收藏0