Webpack學習筆記

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

Webpack

webpack原理

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

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的方式有幾種:html

1.2.1 直接在終端輸入:

webpack {entry file} {destination for bundled file}

其中:前端

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

eg:java

webpack app/main.js public/bundle.js

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

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

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

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

__dirnamenode.js 中的全局變量,它指向當前執行腳本所在的目錄web

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

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

最後,終端輸入 npm start,便可。json

注:

  • 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 在開發單頁應用時很是有用,它依賴於HTML5history 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

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

相關文章
相關標籤/搜索