日更(五十六)-React-webpack

瞎扯

寫react已經寫了3個月了.雖然redux,es6 ,react,antd這些都會寫了.
但對於前端一個項目的搭建,還是很陌生.
對於webpack還是沒怎麼接觸.
畢竟項目不需要自己搭.環境也不用配,往裏填代碼就行.
但作爲有經驗的開發人員,怎麼能不搞明白呢.

概念

查看原文

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

看到這裏.
我發現好像,有點懂什麼意思了.

其實類似於,把所有js打包整合到一起.
傳統前端都是以文件夾的形式,上傳到服務器,來進行發佈的.

有了這個webpack,就相當於,我們的android需要gradle進行編譯一樣.
打包輸出成一個apk.

如圖

entry

module.exports = {
  entry: './path/to/my/entry/file.js'
};

這個最簡單.
就是程序的入口.是哪個js.
相當於啓動頁.

output

output: {
    path: path.resolve(__dirname, 'dist'), //這個是路徑目錄名.
    filename: 'my-first-webpack.bundle.js' //這個是打包後的文件名
  }

好比你要把apk輸出到哪個文件夾下,叫什麼名字一樣

loader

這段話,有點像強行翻譯過來的意思.

大致意思呢,就是webpack不能識別除了js以外的文件.
但是用loader就可以擴展.
好比解析器.不同的文件對於不同的解析器.

 module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' },
      { test: /\.(js|jsx)$/, use: 'babel-loader' },
    ]
  }

rules 這個詞在前端一般就是規則集合的意思.
test 這個不是測試的意思,而是指定要轉換的類型,比如'js','css','jsx','png'這些
use 這個是使用哪個解釋器進行加載,也就是各種庫.比如babel-loader各種.

plugins

插件的意思.

plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

這裏什麼意思呢?

其實就是,生成幫你自動index.html文件

插件的作用就是生成html文件的.

關於插件具體可以看:
插件

總結

雖然,用起來應該還是會懵逼,但過了一遍,感覺還好多了.
說實在的,android寫了這麼多年,我對gradle還是不是很熟.哈哈.看的懂寫不出系列

---

您的喜歡與回覆是我最大的動力－＿－
交流羣:493180098