webpack（3）

備註：說明（第一次寫的文章尚未寫好就提交啦，這裏我接着上篇文章繼續寫））
上編文章說道安裝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官方文檔地址

2、webpack的基本使用步驟

1. 前言
       前面已經安裝了webpack以及解釋了webpackdemo的基本目錄結構啦，下面就是使用webpack啦，最終的目的咱們是生成一個index.bundle.js文件，而後引入html文件就能夠啦
2. 執行操做
       npm start
       解釋：該操做至關與執行了webpack這條命令，官方手冊有好幾種執行方式，但這種最簡單，其餘集中直接去參考webpack手冊吧。webpack4.*都須要依賴webpack-cli模塊，我也裝啦。這裏我遇到個問題。我將webpackdemo01完整的複製一份，當我在打開的時候，它又讓我從新在裝webpack，以及webpack-cli，後來我全局安裝。發現仍是不行，這不影響其餘操做，只是我本身挖坑！！！
3. 生成文件
       執行完上面的操做，就會生成一個index.bundle.js文件在asset/dev/下，怎樣引入
   直接上圖

---

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

1. 同時安裝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:
       */

---

4、webpack-dev-server的加入

5、未完待續