還不打算去認識一下webpack?

Tony_Zby 發布于2019-08-23 12:51 / 584人閱讀

摘要：前言隨我來去看看為時未晚第一版較淺顯的知識懂得可忽略本文方向安裝起步搭建運行粗略代過對于資源的管理對于輸出的管理舉例介紹本地開發基礎服務熱更新模塊熱替換初步認識初步構建新建一個文件并進入更目錄是命令初始一個文件表示跳過詢問步驟安裝

前言

隨我來,去看看webpack!(為時未晚)============》第一版(較淺顯的知識,懂得可忽略本文)

方向

安裝,起步搭建運行. (粗略代過)

對于資源的管理,對于輸出的管理. (舉例介紹)

本地開發 (基礎服務)

熱更新=[模塊熱替換] (初步認識)

1.初步構建

mkdir webpack_demo && cd webpack_demo   // 新建一個文件 并進入更目錄 `mkdir 是linux命令`
npm init -y   // 初始一個packjage.json文件  -y 表示跳過詢問步驟...


//安裝webpack
npm install webpack --save-dev  // 添加webpack-cli依賴到"devDependencies"
//webpack4.0+ 需要安裝webpack-cli
 npm install webpack-cli --save-dev  // 添加webpack-cli依賴到"devDependencies"

//生成如下目錄
├── package.json                                       
├── src                                       //源目錄(輸入目錄)
│?? ├── index.js                                    
├── dist                                         // 輸出目錄
│?? ├── index.html

// 修改 `dist/index.html`
< !DOCTYPE html>

    
        
        webpack_demo
    
    
               //為什么是main.js下面會解釋
    


//修改`src/index.js    `
 function component() {
   var element = document.createElement("div");
     element.innerHTML = "整一個盒子"
     return element;
  }

  document.body.appendChild(component());

 npx webpack (Node 8.2+ 版本提供的 npx 命令) 
node node_modules/.bin/webpack (8.2-版本)

會將我們的腳本作為入口起點，然后輸出為 main.js.

打開dist/index.html  你將會看到 整一個盒子 幾個字樣~

2.資源管理,輸出管理.基本開發起步

//生成如下目錄
  ├── package.json 
+ |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目錄(輸入目錄)
  │?? ├── index.js                                    
  ├── dist                                       // 輸出目錄
  │?? ├── index.html

先介紹一個Lodash庫它是一個一致性、模塊化、高性能的 JavaScript 實用工具庫模塊化處理非常適合值操作和檢測(說白了就是webpack用了我也試試...)
lodash相關文檔

npm install lodash --save //非僅在開發的時候使用的依賴就是需要打包到生產環境的包不加-dev

// src/index.js
import _ from "lodash";

function component() {
   var element = document.createElement("div");
     element.innerHTML = _.join(["lodash","webpack"],"");   //join將 array 中的所有元素轉換為由""分隔的字符串 其它函數可以自己實踐
     return element;
 }

打開index頁面輸出 loadshwebpack

//webpack.config.js
 const path = require("path");
 
 module.exports = {
      entry: "./src/index.js",   //入口
      output: {  //出口
        filename: "main.js", //打包之后腳本文件名稱
        path: path.resolve(__dirname, "dist")  //路徑指向執行 js 文件的絕對路徑 此處為/dist
      }
 };

執行npx webpack --config webpack.config.js    (把之前dist目錄下main.js刪除)  新的腳本生成(其實沒多大變化..)

//  配置一下package.json
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"     //添加此行命令 下次執行打包就是 npm  run  build 相當于上面的npx webpack --config webpack.config.js
  },

// 資源的配置 css 圖片 js等等.. 舉例 css 圖片

npm install --save-dev style-loader css-loader   css的loader
npm install --save-dev file-loader  file(圖片)對象的 loader

 //生成如下目錄
   ├── package.json 
 + |── webpack.config.js                          //webpack配置文件                                     
   ├── src                                        //源目錄(輸入目錄)
   │?? ├── index.js   
 + │?? ├── index.css 
 + │?? ├── icon.jpg                                
   ├── dist                                       // 輸出目錄
   │?? ├── index.html

//修改webpack.config.js
    const path = require("path");  //path路徑模塊
    module.exports = {
      entry: "./src/index.js",   //入口
      output: {   //出口
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
      },
      module: {
         rules: [
           {
             test: /.css$/,  //檢測正則匹配.css結尾的文件
             use: [           //使用倆個loader
               "style-loader", 
               "css-loader"
             ]
           },
           {
             test: /.(png|svg|jpg|gif)$/,  //正則匹配.png svg jpg gif結尾的文件
             use: [    //使用file-loader
               "file-loader"
             ]
           }
         ]
       }
    };
 //修改src/index.css
    div{
        color:red;
    }

 //修改src/index.js
     import _ from "lodash";
     import "./index.css";
     import Icon from "./icon.jpg";
    
    
      function component() {
        var element = document.createElement("div");
    
        element.innerHTML = _.join(["loadsh", "webpack"], " ");
        var myIcon = new Image();
        myIcon.src = Icon;
    
        element.appendChild(myIcon);
        return element;
      }
    
      document.body.appendChild(component());

npm run build(刪除之前的dist目錄下main.js)  你會看紅字和圖片  以上就是資源管理的簡短介紹

npm install --save-dev html-webpack-plugin   安裝html-webpack-plugin模塊 模塊用到功能:
  1： 動態添加每次compile后 js css 的hash
  2:  可配置多頁面 單頁面 這些 
  3： 其它沒涉及到
npm install clean-webpack-plugin --save-dev 清除dist文件夾(每次刪除麻煩了..)配置一下

//修改目錄
  ├── package.json 
  |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目錄(輸入目錄)
 +  │?? ├── app.js
 +  │?? ├── print.js
  │?? ├── index.css 
  │?? ├── icon.jpg                                   
  ├── dist                                       // 輸出目錄
  │?? ├── index.html

//webpack.config.js  ===============================================
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     })
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};

//修改src/index.js ===================================================
 import _ from "lodash";   //引入lodash模塊
 import "./index.css";     // index.css
 import Icon from "./icon.jpg";   // 圖片
 import printMe from "./print.js"    // printJS


  function component() {
    var element = document.createElement("div");  //創建一個元素

    element.innerHTML = _.join(["loadsh", "webpack"], " ");  // lodash中_.join方法
    var myIcon = new Image(); //創建一個圖片
    myIcon.src = Icon;    //src賦值

    element.appendChild(myIcon);   //追加圖片

    var btn = document.createElement("button");  //創建按鈕
    btn.innerHTML = "Click me and check the console!";   //內容賦值
    btn.onclick = printMe;   //添加事件
    element.appendChild(btn);   //追加元素

    return element;
  }

  document.body.appendChild(component());   //追加元素到body中
  
  //修改src/print.js  ==========================================
  export default function printMe() {
      console.log("from print.js");
  }

npm run build 會發現基本webpack的配置之后 ,有點模樣(意思)了  打開頁面index.html正常訪問

3.本地開發

npm install --save-dev webpack-dev-server     "webpack-dev-server" 為你提供了一個簡單的 web 服務器，并且能夠實時重新加載

 //修改webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
     contentBase: "./dist"
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     })
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};
//修改package.json
...
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --open", //start命令
    "build": "webpack"
 },
 ...

npm run start 本地起了8080端口的服務,你也可以看到自己的頁面

4.熱更新

//修改webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
     contentBase: "./dist",
     hot: true
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     }),
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};

npm run start 運行http://localhost:8080/  然后你去修改print js的console(或者添加其他代碼) 會發現命令行輸出updated. Recompiling... 字樣 這就是簡單的實現了熱更新

最后

本文只是大概從幾個demo來對于webpack的基礎概念 入口entry 出口 output loader plugins mode(沒有直面涉及)幾大模塊的梳理于實踐,讓大家對于webpack不在那么陌生!

后續文章會從更深入的角度去學習webpack! 暫定下周1 發表文章(內容詳細介紹hot 實現一個簡易的vue-cli等等)

demo的代碼我會同步github

ps:

第二版 : webpack構建一個簡易的my-vue-cli

云服務器 GPU云服務器打算什么云服務器好用還不貴數據挖掘是打算發認識

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

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

我他喵的到底要怎樣才能在生產環境中用上 ES6 模塊化？

摘要：因此，你還是需要各種各樣雜七雜八的工具來轉換你的代碼噢，我可去你媽的吧，這些東西都是干嘛的我就是想用個模塊化，我到底該用啥子本文正旨在列出幾種可用的在生產環境中放心使用模塊化的方法，希望能幫到諸位后來者這方面的中文資源實在是忒少了。原文發表在我的博客上。最近搗鼓了一下 ES6 的模塊化，分享一些經驗 :) Python3 已經發布了九年了，Python 社區卻還在用 Python 2...

KaltZK 2019-08-20 17:47 評論0 收藏0
webpack的學習之路~~第一天

摘要：第節認識的作用學習的一原因現在的前端網頁功能豐富，特別是單頁應用技術流行后，的復雜度增加和需要一大堆依賴包，還需要解決，新增樣式的擴展寫法的編譯工作。在出現后，還肩負起了優化項目的責任。其實就是獲取了項目的絕對路徑。第01節：認識WebPack的作用：學習的一原因：現在的前端網頁功能豐富，特別是SPA（single page web application 單頁應用）技術流行后，...

blankyao 2019-08-22 17:03 評論0 收藏0
寫給初入門/半路出家的前端er

摘要：半路出家的前端程序員應該不在少數，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序員應該不在少數，我也是其中之一。為何會走向前端非計算機專業的我，畢業之后，就職于一家電力行業公司，做過設備調試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 評論0 收藏0
作為前端開發者，你還不知道什么是 postCss？

摘要：的定位屬于預處理器嗎還是屬于后置處理器都不是，因為具體做的事取決于開發者使用了什么插件。這里做一個我覺得比較恰當的類比，中的相當于的中的，，等預處理器相當于，雖然不是完全合理，但是還是比較恰當。前言原諒我取這樣的標題，我知道 postCss 對于大多數前端開發者來說早已經很熟悉了，但是樓主作為一個初出茅廬的前端er，還有好多的工具和技術沒接觸過，說來慚愧。雖然平時也喜歡使用css預...

appetizerio 2019-08-29 17:17 評論0 收藏0

發表評論

登陸后可評論

0條評論

Tony_Zby

男|高級講師

我要關注我要私信

TA的文章

C語言：數組（及冒泡排序）

閱讀 2480·2021-11-16 11:45
Facebook發布新工具，可查找Android應用程序中的安全和隱私漏洞

閱讀 2453·2021-10-11 10:59
字節同事寫了一篇Leetc刷題心得，高管看見之后，直接給他漲了20K，我驚呆了

閱讀 2257·2021-10-08 10:05
搬瓦工：Linux CentOS/Ubuntu/Debian修改設置系統時區教程

閱讀 3843·2021-09-23 11:30
嵌入式軟件崗位就業指導建議！！！

閱讀 2379·2021-09-07 09:58
前端菜鳥筆記 Day-5 CSS 高級

閱讀 811·2019-08-30 15:55
css文本屬性

閱讀 779·2019-08-30 15:53
flex幾種多列布局

閱讀 1928·2019-08-29 17:00

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

還不打算去認識一下webpack?

會將我們的腳本作為入口起點，然后輸出為 main.js.

相關文章

我他喵的到底要怎樣才能在生產環境中用上 ES6 模塊化？

webpack的學習之路~~第一天

寫給初入門/半路出家的前端er

作為前端開發者，你還不知道什么是 postCss？

發表評論

0條評論

Tony_Zby

男|高級講師

TA的文章

C語言：數組（及冒泡排序）

Facebook發布新工具，可查找Android應用程序中的安全和隱私漏洞

字節同事寫了一篇Leetc刷題心得，高管看見之后，直接給他漲了20K，我驚呆了

搬瓦工：Linux CentOS/Ubuntu/Debian修改設置系統時區教程

嵌入式軟件崗位就業指導建議！！！

前端菜鳥筆記 Day-5 CSS 高級

css文本屬性

flex幾種多列布局

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

還不打算去認識一下webpack?

會將我們的腳本作為入口起點，然后 輸出 為 main.js.

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

會將我們的腳本作為入口起點，然后輸出為 main.js.