學習文章來源《入門Webpack,看這篇就夠了》javascript
Webpack的做用是:分析你的項目結構,找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運行的拓展語言(less,TypeScript等),並將其轉換和打包爲合適的格式供瀏覽器使用。
Gulp/Grunt 是一種可以優化前端的開發流程的工具,而WebPack是一種模塊化的解決方案,不過,Webpack的優勢使得Webpack在不少場景下能夠替代 Gulp/Grunt 類的工具。css
package.json
文件,這是一個標準的 npm 說明文件,能夠在該目錄的終端中使用 npm init
命令自動生成 package.json
文件,此時終端會問你一系列諸如項目名稱,項目描述,做者等信息。。npm init --save-dev webpack
main.js
)做爲主接口,而Webpack正是透過該主接口生成一個彙總js文件用於存放在 public 文件夾讓 HTML 文件引入。運行Webpack的方式有幾種:html
webpack {entry file} {destination for bundled file}
其中:前端
{extry file}
表示爲主接口文件的路徑,本文中就是上述 main.js 的路徑{destination for bundled file}
處填寫打包文件的存放路徑以及文件名字eg:java
webpack app/main.js public/bundle.js
Webpack 擁有不少其它的比較高級的功能(好比說 loaders 和 plugins ),這些功能均可以經過命令行模式實現,可是操做不太方便且容易出錯的,更好的辦法是定義一個配置文件,這個配置文件其實也是一個簡單的 JavaScript 模塊,咱們能夠把全部的與打包相關的信息放在該配置文件裏面。node
一、建立 webpack.config.js
文件
在根目錄下建立 webpack.config.js
文件,其實質是一個對象,如:webpack
module.exports = {
entry: __dirname + '/app/main.js',//主接口文件
output: __dirname + '/public',//打包後生成文件路徑
filename: "bundle.js"//生成文件名字
}
__dirname
爲 node.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
關於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
選項具備類似的缺點;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"
}
經過使用不一樣的 loaders,webpack 有能力調用外部的腳本或工具,實現對不一樣格式的文件的處理,好比說分析轉換 less 爲 css,或者把下一代的JS文件(ES6,ES7)轉換爲現代瀏覽器兼容的JS文件,對React的開發而言,合適的 Loaders 能夠把 React 的中用到的JSX文件轉換爲JS文件。