webpack打包簡單入門

標籤：get   簡單   開發效率   ima   配置   val   譯文   webp   學習   

使用webPack前請先安裝nodejs

 

webpack命令集合

安裝命令：
npm install webpack -g 全域安裝

npm install webpack --save-dev 當前專案檔夾下安裝


打包命令

  webpack --config XXX.js //使用另一份設定檔（比如webpack.config2.js）來打包

  webpack --watch //監聽變動並自動打包

  webpack -p //壓縮混淆指令碼，這個非常非常重要！

  webpack -d //產生map對應檔，告知哪些模組被最終打包到哪裡了

 

打包介紹： 

打包測試檔案1：

// Greeter.jsmodule.exports = function () {    var greet = document.createElement(‘div‘);    greet.textContent = "我的第一個打包程式!";    return greet;};

打包測試檔案2：主檔案入口

var greeter = require(‘./Greeter.js‘);document.getElementById(‘root‘).appendChild(greeter());

 

打包的方式有很多種，我們還是用比較方便簡單的方式來進行打包，建立設定檔webpack.config.js

module.exports = {    devtool:‘‘,    entry: "./main.js",//已多次提及的唯一入口檔案    output: {        path: __dirname,        filename: "bundle.js"//打包後輸出檔案的檔案名稱    }};

 

運行打包命令 webpack 

之後便能在項目根目錄看見打包好的檔案"bundle.js"。

還有一種打包方式

運行npm init 在項目根目錄產生 package.json 檔案，進行如下配置：

然後運行npm start

打包完成。

   --------打包的命令有很多種，這裡就不一一講解了，具體看頂部打包命令。

 

設定檔介紹：

產生Source Maps（使調試更容易）

開發總是離不開調試，如果可以更加方便的調試當然就能提高開發效率，不過打包後的檔案有時候你是不容易找到出錯了的地方對應的原始碼的位置的，Source Maps就是來幫我們解決這個問題的。
通過簡單的配置後，Webpack在打包時可以為我們產生的source maps，這為我們提供了一種對應編譯檔案和源檔案的方法，使得編譯後的代碼可讀性更高，也更容易調試。

在webpack的設定檔中配置source maps，需要配置devtool，它有以下四種不同的配置選項，各具優缺點，描述如下：

devtool選項	配置結果
source-map	在一個單獨的檔案中產生一個完整且功能完全的檔案。這個檔案具有最好的source map，但是它會減慢打包檔案的構建速度；
cheap-module-source-map	在一個單獨的檔案中產生一個不帶列映射的map，不帶列映射提高項目構建速度，但是也使得瀏覽器開發人員工具只能對應到具體的行，不能對應到具體的列（符號），會對調試造成不便；
eval-source-map	使用eval打封裝來源檔案模組，在同一個檔案中產生乾淨的完整的source map。這個選項可以在不影響構建速度的前提下產生完整的sourcemap，但是對打包後輸出的JS檔案的執行具有效能和安全的隱患。不過在開發階段這是一個非常好的選項，但是在生產階段一定不要用這個選項；
cheap-module-eval-source-map	這是在打包檔案時最快的產生source map的方法，產生的Source Map 會和打包後的JavaScript檔案同行顯示，沒有列映射，和eval-source-map選項具有相似的缺點；

 

正如上表所述，上述選項由上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的構建速度的後果就是對打包後的檔案的的執行有一定影響。

在學習階段以及在小到中性的項目上，eval-source-map是一個很好的選項，不過記得只在開發階段使用它，繼續上面的例子，進行如下配置

     

cheap-module-eval-source-map方法構建速度更快，但是不利於調試，推薦在大型項目考慮da時間成本是使用。

 

webpack打包簡單入門