webpack入門

標籤：file   配置參數   ini   官網   模組   資訊   自己的   pat   save   

1.webpack介紹

     一個打包工具、一個模組載入工具、各種資源都可以當成模組來處理。

   官網：http://webpack.github.io/

2.直接上代碼教程

  前提需要安裝node.js，所有的命令都需要node，安裝方法可以百度。全是教程。

3.第一步：建立一個空檔案夾，webpack，名字隨意。

   安裝webpack的指令代碼：npm(或cnpm) install  webpack -g

第二步：初始化 npm init

這一步會有很多資訊，可以不用填寫，也可以填寫。

4.配置參數介紹：

entry：是頁面入口檔案配置 html檔案引入唯一的js檔案

output：對應輸出項的配置

  path：入口檔案最終要輸出到哪裡

  filename：輸出檔案的名稱

  publicPath：公用資源路徑

5.在項目根目錄建立：webpack.config.js設定檔進行webpack配置。

並且還建立一些路徑儲存基本檔案：例如，可以根據你自己的需要建立相關的檔案夾。

其中out檔案是代碼產生的，後面有介紹。src下面的檔案夾。

6.在src的js檔案夾下建立一個入口檔案，index.js,在項目的根目錄下建立index.html

編寫webpack.config.js代碼：

 

 在你的index.html和index.js裡面隨便寫的代碼，有輸出資訊就可以。

index.html

index.js

下面：運行命令列 ：webpack或者 webpack -w

然後在本地開啟index.html頁面就可以看到顯示的資訊了。

 

 7.Webpack loader載入器

繼續配置loader，通過載入器處理檔案：比如sass less等， 告知每一種檔案都需要什麼載入器處理。

下面將需要的包都下載下來：

執行下面的命令: cnpm install babel-loader babel babel-core css-loader style-loader url-loader

File-loader less-loader less –save-dev

 

 

在package.json檔案中能夠看到下載包：

 

 

下載完成之後在webpack.config.js檔案，將載入器引入

 

8.接下來測試css：

在專案檔夾下的src檔案夾下建立：index.css,隨便寫一點樣式；

因為在webpack中所有檔案都是模組，所以必須將css引入，在index.js中添加如下代碼，

//index.js

 

Index.html

 

 

Index.css

 

 

結果如下所示：

 

9.當有多個js檔案時，如何進行引入？

下面做個小的demo，點擊一個dom使它發生變化。

現在src的js檔案夾下建立一個小工具tool.js

tool.js

 

在src的js檔案夾下建立一個demo.js檔案；

 

 

修改入口檔案index.js

 

啟動並執行效果：

 div的高度和寬度都發生了變化。

8.關於圖片的打包；

在img檔案夾下放入一個圖片

當成模組引入圖片，在body裡面插入這個img

 

 

由於我們引入的是靜態資源，需要在webpack.config.js中修改一下路徑

 

 

運行本地的index.html就可以看到效果了。

 

 

webpack入門