webpack4基礎配置

網頁中常見的靜態資源：

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環境：

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

二、 建立項目文件夾，例如文件夾名稱爲vue，在文件夾中建立兩個文件夾，分別文dist和src

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

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

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

六、配置webpack.config.js文件

七、修改package.json的配置

--open 設定自動打開項目

--port 3000 指定端口爲3000

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

--hot 啓用瀏覽器熱更新

八、運行 npm run dev ，會自動打開index.html，在dist目錄下並不會看到bundle.js ,可是在index.html中引入<script src="/bundle.js"></script>，會生效，則打包成功，在這裏bundle.js直接託管到電腦的內存中，雖然看不到，可是確實存在，它和dist平級

*

html-webpack-plugin插件配置：

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

二、在webpack.config.js文件中須要先引入模塊，而後再進行配置，注意，前面咱們安裝的webpack爲全局的，這裏就會報錯

由於本地找不到webpack，因此能夠再執行npm install webpack安裝本地包，在webpack.config.js加入下面代碼

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

所以能夠將物理頁面的<script src="/bundle.js"></script>註釋掉，也不會影響頁面效果，也就是使用html-webpack-plugin插件以後，不須要手動處理bundle.js的引入，插件會自動幫咱們建立script標籤，引入正確的bundle.js

使用webpack打包css:

webpack只能打包js文件，要打包其餘文件須要安裝其餘模塊

一、運行 npm i style-loader css-loader --save-dev

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

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

一、運行 npm i less-loader less -D

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

使用webpack打包url地址文件:

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

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

webpack.config.js文件的配置