webpack入門

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就能夠看到效果了。