文章3：webpack（3）

RyanQ 發布于2019-08-26 12:25 / 3453人閱讀

摘要：中的會自動的替換中的，也即最后生成的文件叫做。基礎路徑后面介紹。都需要依賴模塊，我也裝啦。我將完整的復制一份，當我在打開的時候，它又讓我重新在裝，以及，后來我全局安裝。

備注：說明（第一次寫的文章還沒有寫好就提交啦，這里我接著上篇文章繼續寫））
上編文章說道安裝webpack的順序不能改變  
下面繼續：

一：webpack的目錄結構

附上本人webpackdemo01的代碼

下面介紹此時如果安裝成功之后的文件基本的目錄結構

圖片都不知道有沒有顯示出來（寫的我一臉蒙）介紹目錄結構

   -asset
    -dev
     -index.bundle.js
   -node_modules
   -src
    -index
     -config.json
     -greeter.js
     -index.js
   -views
    -index.html
   -package-lock.json
   -package.json
   -webpack.config.jsasset
    -dev
     -index.bundle.js
   -node_modules
   -src
    -index
     -config.json
     -greeter.js
     -index.js
   -views
    -index.html
   -package-lock.json
   -package.json
   -webpack.config.js
   //(以上就是基本目錄結構)

目錄結構詳解

解釋上方的目錄結構

asset/dev:（出口文件地址）該目錄是執行webpack打包后生成文件的項目，其中包含打包后圖片，以及js文件

node_modules:模塊依賴文件，本人經驗分享，這個文件通常占用的內存比較大，通常可以將其放在當前目錄的上一級或者根目錄，但是在webpack里面只能放在與webpack.config.js同一級目錄，否則找不到該文件，自己寫node服務器的時候就可以放在上一層，具體自己也不太清楚，總之，放在該目錄就對啦

src：（入口文件地址）放入每一個生成文件的入口地址，我在網上找了許多的目錄結構，我覺得這個目前在我看來最好，比如說我們最后生成index.bundel.js文件，而入口文件index.js所有的依賴我們都放在index文件夾中，而且只放與index.js相關的依賴文件，更體現出模塊化，當然肯定有更好的目錄結構，還望告之

views：最后生成的視圖（即HTML文件），里面只需引index.bundle,js文件即可，這種目錄結構也是為webpack打包多頁面設計的

package-lock.json:該文件存儲的是所有依賴模塊的文件名，只需要執行npm install 就可以為項目安裝所需模塊

package.json：基本配置（直接放圖啦）

//解釋：注意
 "script":{
   "start":"webpack"
  }
 /*
   這條指令還是很好的，當你執行打包操作時，你只需npm start就可以進行打包操作啦，
   npm start是一個特殊指令，了解更多可以參考官方手冊，如果是其他的指令，則需要
   使用 npm run [server/build/dev] 等，你還可以自定義其他的腳本（script）指令
   隨你高興 哈哈！！！   
 */

webpack.config.js:(重要的目錄)，后面這個目錄會越來月豐富，內容越來越多，基本配置直接看圖

解釋：圖中包含配置了打包過程中入口文件與出口文件entry（入口），output（出口）entry可以是鍵-值對（形如："key":"value"）語法，也可以是對象語法(形如："key":{"key":"value"})，我這里直接使用對象語法，方便后面的多頁面，注意：這里必須使用絕對路徑，使用__dirname或者使用path對象。"filename"："[name].bundle.js"中的[name]會自動的替換entry中的index，也即最后生成的文件叫做index.bundle.js。"publicPath":""基礎路徑 后面介紹。

npm官方文檔地址

二、webpack的基本使用步驟

前言
????前面已經安裝了webpack以及解釋了webpackdemo的基本目錄結構啦，下面就是使用webpack啦，最終的目的我們是生成一個index.bundle.js文件，然后引入html文件就可以啦

執行操作
????npm start
????解釋：該操作相當與執行了webpack這條命令，官方手冊有好幾種執行方式，但這種最簡單，其他集中直接去參考webpack手冊吧。webpack4.*都需要依賴webpack-cli模塊，我也裝啦。這里我遇到個問題。我將webpackdemo01完整的復制一份，當我在打開的時候，它又讓我重新在裝webpack，以及webpack-cli，后來我全局安裝。發現還是不行，這不影響其他操作，只是我自己挖坑！！！

生成文件
????執行完上面的操作，就會生成一個index.bundle.js文件在asset/dev/下，怎樣引入
直接上圖

三、style-loader/css-style/file-loader的加入

同時安裝style-loader css-loader file-loader三項的命令

    cnpm i style-loader css-style file-loader --save-dev
    /*
    使用cnpm裝模塊更快，效果與npm一樣，這是一個淘寶鏡像npm（推薦使用）
    不知道file-loader可不可以跟這兩個同時裝，反正另外兩個是可以的
    style-loader:
    css-loader:
    file-loader:
    */

四、webpack-dev-server的加入 五、未完待續

GPU云服務器云服務器買3送3 apache maven 3.0.3 3.5 3.X

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

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

webpack入門學習手記（二）

摘要：例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。最近開始想要維護一個個人的公眾...

Joyven 2019-08-23 14:05 評論0 收藏0
vue-cli中配置webpack系列文章八 ------ 工程常用配置

摘要：根據模板插入等生成最終生成的存放路徑，相對于的路徑模板路徑插入的位置，路徑設置屬性，屬性值是所在的路徑。配置后，在使用時將不再需要和進行引入，直接使用即可。一 webpack.base.conf.js 1. entry 為入口文件 1.1 在此可以綁定 babel 墊片處理ie兼容 1.2 我們大部分為單頁面應用（SPA），配置多頁面也可以在此配置 2. resol...

netScorpion 2019-08-26 13:51 評論0 收藏0
一個現代化的webpack工程初建

摘要：一前言文章介紹了一個現代化的項目的環境是什么樣的。其中一個就是引用路徑的問題。擴展將單獨打包詳細介紹見這是一個插件，可以簡化創建文件以便為包提供服務。兩種環境的配置在中都支持的配置具體的默認配置查詢可以移步這里的默認設置。一前言文章介紹了一個現代化的項目的webpack4環境是什么樣的。這里只是介紹了基礎的功能，如果需要詳細的相關只是可以去webpack官網去查閱。代碼地址：gi...

MyFaith 2019-08-22 18:07 評論0 收藏0
Webpack 4.0 發布:有哪些新特性？（譯）

摘要：有哪些新特性有哪些改進學著使用這個新版本，來構建更快的應用吧。繼版本之后，花了將近八個月的時間來發布。的創始人之一，，建議用戶使用，以便使用最優的性能，是因為源代碼使用了新特性。全新的插件系統配備了全新整改的插件系統。本文原文地址：https://auth0.com/blog/webpac...第一次翻譯，不當之處，歡迎指正官方已經發布了Webpack 4.0。有哪些新特性？有哪些...

HitenDev 2019-08-22 15:12 評論0 收藏0
webpack v2升級踩坑筆記

摘要：從再到目前當紅明星，前端模塊打包技術日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關于的特征，可以查看知乎如何評價新引入的代碼優化技術的討論。從Grunt->gulp->webpack,再到目前當紅明星rollup，前端模塊打包技術日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

JayChen 2019-08-20 17:59 評論0 收藏0