Webpack學習筆記

學習文章來源《入門Webpack，看這篇就夠了》

Webpack

Webpack的做用是：分析你的項目結構，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運行的拓展語言（less，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。
Gulp/Grunt 是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過，Webpack的優勢使得Webpack在不少場景下能夠替代 Gulp/Grunt 類的工具。

1.1 初始化Webpack

• 第一步：須要在項目的根目錄下建立 package.json 文件，這是一個標準的 npm 說明文件，能夠在該目錄的終端中使用 npm init 命令自動生成 package.json 文件，此時終端會問你一系列諸如項目名稱，項目描述，做者等信息。。
• 第二步：爲該項目安裝Webpack，在終端輸入 npm init --save-dev webpack
• 第三步：能夠在根目錄下建立 app 文件夾和 public 文件夾（命名隨意）， app 文件夾用來存放原始數據和咱們將寫的 JavaScript 模塊， public 文件夾用來存放以後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）
• 無論 app 文件夾在創建多少個js模塊，都須要創建一個js文件（如 main.js ）做爲主接口，而Webpack正是透過該主接口生成一個彙總js文件用於存放在 public 文件夾讓 HTML 文件引入。

1.2 運行Webpack

運行Webpack的方式有幾種：

1.2.1 直接在終端輸入：

webpack {entry file} {destination for bundled file}

其中：

• {extry file} 表示爲主接口文件的路徑，本文中就是上述 main.js 的路徑
• {destination for bundled file}處填寫打包文件的存放路徑以及文件名字
• 注：填寫路徑的時候不用添加花括號

eg：

webpack app/main.js public/bundle.js

1.2.2 經過配置文件來使用 Webpack：

Webpack 擁有不少其它的比較高級的功能（好比說 loaders 和 plugins ），這些功能均可以經過命令行模式實現，可是操做不太方便且容易出錯的，更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的 JavaScript 模塊，咱們能夠把全部的與打包相關的信息放在該配置文件裏面。

一、建立 webpack.config.js 文件
在根目錄下建立 webpack.config.js 文件，其實質是一個對象，如：

module.exports = {
    entry: __dirname + '/app/main.js',//主接口文件
    output: __dirname + '/public',//打包後生成文件路徑
    filename: "bundle.js"//生成文件名字
}

__dirname 爲 node.js 中的全局變量，它指向當前執行腳本所在的目錄。

二、在終端中輸入 webpack 或 根目錄路徑/webpack ，便可。
亦能夠在 package.json 文件中對 scripts 對象進行相關設置，如：

"scripts": {
    "start": "webpack"
    }

最後，終端輸入 npm start，便可。

注：

• package.json 中的 script 會按必定順序尋找命令對應位置，本地的 node_modules/.bin 路徑就在這個尋找清單中，因此不管是全局仍是局部安裝的Webpack，你都不須要寫前面那指明詳細的路徑了
• 若是對應的腳本名稱不是 start，想要在命令行中運行時，須要這樣用語句： npm run {script name} 如 npm run server

1.3 Source Maps

關於Source Maps，請看《JavaScript Source Map 詳解》

有時候經過打包後的文件，若是代碼出錯了，是不容易找到出錯了的地方，而 Source Maps 就是來解決這個問題的。經過簡單的配置，Webpack 就能夠在打包時爲咱們生成的 Source Maps。
配置也很簡單，就是在 webpack.config.js 文件對象中添加屬性 devtool ，它有如下四種不一樣的屬性值：

• source-map ：在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的 Source Maps，可是它會減慢打包速度；
• cheap-module-source-map ：在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；
• eval-source-map ：使用 eval 打包源文件模塊，在同一個文件中生成乾淨的完整的 Source Maps。這個選項能夠在不影響構建速度的前提下生成完整的 Source Maps，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定不要啓用這個選項；
• cheap-module-eval-source-map ：這是在打包文件時最快的生成 Source Maps 的方法，生成的 Source Maps 會和打包後的 JavaScript 文件同行顯示，沒有列映射，和eval-source-map選項具備類似的缺點；

1.4 使用Webpack搭建本地服務器

Webpack提供一個可選的本地開發服務器，這個本地服務器基於 node.js 構建，它是一個單獨的組件，在 Webpack 中進行配置以前須要單獨安裝它做爲項目依賴：

npm install --save-dev webpack-dev-server

而後還需在 webpack.config.js 文件中進行配置 devserver 屬性，其屬性值有：

• contentBase：默認 webpack-dev-server 會爲根文件夾提供本地服務器，若是想爲另一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄。
• port：設置默認監聽端口，若是省略，默認爲」8080「
• inline：設置爲 true，當源文件改變時會自動刷新頁面
• historyApiFallback 在開發單頁應用時很是有用，它依賴於HTML5 的 history API，若是設置爲 true，全部的跳轉將指向 index.html。

此時 webpack.config.js 文件如：

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  } 
}

最後還需在 package.json 文件中的 scripts 對象中添加以下命令，而後在終端輸入 npm run server 用以開啓本地服務器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }

1.5 Loaders

經過使用不一樣的 loaders，webpack 有能力調用外部的腳本或工具，實現對不一樣格式的文件的處理，好比說分析轉換 less 爲 css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件，對React的開發而言，合適的 Loaders 能夠把 React 的中用到的JSX文件轉換爲JS文件。