前端自動化構建工具之webpack入門——簡單入門

 

寫在前面

這篇博客也是參照別人的webpack入門，加上本身的一些操做，還有我在此過程當中遇到的困難。若是是已經入門的或者這方面的高手，請繞行，也請勿吐槽。

正文開始

咱們爲何要學習webpack

首先，咱們爲何要學習前端自動化構建工具，我開始瞭解自動化構建工具的時候以爲很麻煩，要配環境，還要敲命令，就爲了把那些文件都打包在一個叫bundle.js的文件裏？那有什麼意義？

看了半天文檔，也沒明白到底有啥好處。因而去參照了前輩的博客。

• 模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
• 相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；
• Scss，less等CSS預處理器等等。

好了，如今咱們明白，爲何要使用他了。

webpack工做方式

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

正式開始

在此以前須要安裝node的環境，具體方法請百度。

第一步，新建 一個文件夾，這裏我叫webpackstudy，而後使用命令行進入。

第二步，安裝，若是你想其餘的文件也可使用，推薦安裝全局的，不然的話就安裝一個局部的。

全局安裝：npm install -g webpack

安裝到項目目錄：npm install --save-dev webpack

這樣一串黃色的顯示完，就安裝好了。

初始化項目：npm init

作完這個步驟後，在你的項目中會出現這個文件

輸入這個命令，命令行會提示你輸入一系列的信息，若是不許備發佈的話，回車就好了。

package.json文件已經就緒，咱們在本項目中安裝Webpack做爲依賴包

// 安裝Webpack
npm install --save-dev webpack

 

回到以前的空文件夾，並在裏面建立兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的JavaScript模塊，public文件夾用來存放以後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來咱們再建立三個文件:

• index.html --放在public文件夾中;
• Greeter.js-- 放在app文件夾中;
• main.js-- 放在app文件夾中;

 文件夾的結構以下：

咱們在index.html中寫以下代碼，他的目的是爲了引入打包後的js文件bundle.js

在Greeter.js中寫以下代碼，這個文件的做用是，爲了給index頁面建立結點並插入語句

在main.js中寫以下語句：

昨晚把下半部分寫好了，可是提交的時候一直提示我有敏感文字，我修改以後第二次點擊提交沒有任何提示，也不知道提交成功沒有，可是刷新的話，會從新加載，以前寫好的會消失，所以我只有把它存到word裏，而後再複製過來，複製過來圖片又要從新替換進來。可是我試了不少次以後仍是提示有敏感文字，因而我往復5次以後沒有提交成功，我以爲這是一個bug，所以我將下半部分提交到了簡書上。歡迎你們閱讀。

下半部分連接