webpack學習心得

webpack學習心得

出於對webpack的好奇，決定要去學習門技術，提高本身。

什麼是webpack？

webpack是德國開發者開發的模塊加載器兼打包工具，在webpack中，它能把各類資源，例如js(含jsx)，coffee，樣式（含less、sass），圖片等都做爲模塊來使用和處理。所以，webpack當中js能夠引用css,css中能夠嵌入圖片dataUrl。

爲何要用webpack？

webpack是前端一個工具，可讓各類模塊進行加載，預處理，再進行打包，它能有gunt或gulp全部基本功能，優勢以下：
    1.支持commonjs和AMD模塊。
    2.支持不少模塊加載器的調用，可使模塊靈活定製
    3.能夠經過配置打包成多個文件，有效的利用瀏覽器的緩存功能提高性能

安裝node.js

選擇對應版本先下載一個node.js安裝包。

下載完成後雙擊便可。
命令行輸入node -v，回車輸出nodejs版本號，表示安裝成功。
命令行輸入npm -v,回車輸出npm版本號，表示安裝成功(nodejs集成了npm)。
因爲npm不穩定，下載速度慢，建議使用淘寶鏡像：
`npm install -g cnpm --registry=https://registry.npm.taobao.org`,
命令行輸入cnpm -v，回車輸出cnpm版本號，表示安裝成功。之後安裝就使用cnpm命令。

安裝webpack

1.命令行輸入 `sudo cnpm install webpack -g`回車，全局安裝webpack,命令行輸入`webpack -v`回車,輸出webpack版本號，表示安裝成功。(mac系統下須要輸入sudo提升權限，不然報錯)。
2.cd進入到咱們的項目中，我建立的項目爲**********/webpack，在這個項目下建立配置項，命令行輸入 `cnpm init`,一路回車。
這時咱們的項目會多出一個package.json的文件

接下來，在項目下建立webpack的依賴項，命令行輸入`cnpm install webpack --save-dev`。
再來看咱們的項目多出一個node_modules文件且package.json多出一行文字

到這裏，準備工做已經完成，咱們可使用webpack了。

開始webpack之旅

1.小試牛刀

開始以前，咱們構建一下項目結構，如圖：

main.js做爲一個入口文件，用work.js來編寫各類行爲特效。
main.js中使用require來加載work.js。

在頁面中寫入一段話。

命令行輸入`webpack app/main.js publice/dist/webpack.js`,回車。
意思是將根目錄下的app/入口文件main.js生成新的js文件，把新生成的js放到對應路徑下，命名爲webpack.js
再看咱們的項目，多出一個dist文件夾和一個webpack.js文件。

在index.html中引入webpack.js，執行看看效果。

OK,小試牛刀成功。

2.webpack之文件路徑

上面小試牛刀，咱們須要輸入文件路徑，當咱們項目複雜了，寫文件路徑也很費勁，下面咱們來解決這個問題。

 

 - 建立webpack.config.js
在項目根目錄下建立一個文件叫webpack.config.js（必須是這個名字）,建立配置項

如今在命令行直接執行webpack就能夠了。

webpack之loaders

1.loaders是幹什麼的？

loaders是webpack中最核心的功能。經過使用不一樣的loader,webpack經過調用外部的腳本或工具能夠對各類各樣的格式的文件進行處理，好比說分析json文件並把它轉換成javascript文件，或者說把下一代的js文件（ES6,ES7）轉換爲現代瀏覽器能夠識別的js文件。

2.loaders配置項

loaders須要單獨安裝而且須要webpack.config.js下的modules關鍵字下進行配置，loaders的配置選項包括如下幾方面：
1)test:一個匹配loaders所處理的文件的拓展名的正則表達式（必須）
2)loader:loader的名稱（必須）
3)include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）
4)query:爲loaders提供額外的設置選項（可選）

3.如何使用loaders

• loaders之json-loader使用

  命令行輸入cnpm install --save-dev json-loader安裝json-loader,
  在webpack.config.js建立module

  
  OK,配置項已經寫完了。
  接下來建立json文件，隨便寫點內容，在工做文件work.js引入

命令行輸入`webpack`，運行webpack。

json-loader成功！

• loaders之css-loader和style-loader

  webpack提供兩個工具處理樣式表，css-loader和style-loader
  css-loader使你可以使用相似@import和url(...)的方法實現require()的功能，style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的js文件中。
  命令行輸入cnpm install --save-dev style-loader css-loader，安裝style-loader和css-loader
  配置項寫法：
  module: {

  loaders: [
         {
             test: '/\.css$/',
             loader: 'style!css'
           }
     ]

  }

新建一個css文件並在入口文件main.js引入，執行webpack，看下效果

奇怪了，報錯，看了半天。
將配置項換種寫法

rules:[{
       test:/\.css$/,
       use: ['style-loader', 'css-loader'],
     }]

執行webpack，看下效果

OK,css引進去了。

• lodaer之postcss-loader，autoprefixer

  考慮到兼容性問題，爲css添加前綴,咱們就使用postcss-loader，autoprefixer。
  命令行輸入cnpm install --save-dev postcss-loader autoprefixer,
  配置項：
  

在webpack.config.js同級目錄下新建postcss.config.js

執行webpack，去瀏覽器審查元素

前綴添加成功！