webpack入門之簡單例子跑起來

webpack介紹

　　Webpack是當下最熱門的前端資源模塊化管理和打包工具，它能夠將不少鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源，還能夠將按需加載的模塊進行代碼分割，等到實際須要的時候再異步加載。

webpack和Grunt以及Gulp相比有什麼特性

Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得Webpack能夠替代Gulp/Grunt類的工具。

Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯、組合、壓縮等任務的具體步驟。

webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。

兩者進行比較，Webpack的處理速度更快更直接，能打包更多不一樣類型的文件。

開始使用webpack

Node.js是必備的工具，NPM的版本最好是3.x版本以上，NPM 3.x提供了更有效的包依賴管理。

webpack用npm安裝。

//全局安裝
npm install  webpack -g
//安裝到你的項目目錄
npm install  webpack --save-dev

1.新建一個文件夾wkdemo，在該文件下 npm install webpack --save-dev

(看得出來應該先建一個package.json文件的(/ □ \)）

2.package.json文件準備，能夠使用npm init命令自動建立這個package.json文件

 View Code

3.webpack.config.js文件準備

 View Code

4.index.html最基礎的html代碼，它惟一的目的就是加載打包後的js文件（bundle.js），注意路徑對應起來

 View Code

由webpack.config.js文件中：

//頁面入口文件配置
    entry: [
      // 'webpack/hot/only-dev-server',
      "./js/app.js"
    ],

能夠看出須要建一個文件js/app.js做爲入口文件。

5.入口文件app.js準備

//app.js
var greeter = require('./hello.js');
document.getElementById('root').appendChild(greeter());

能夠看到這裏引用一個同目錄下hello.js文件

6.hello.js文件準備

// hello.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings! hello world12345";
  return greet;
};

7.執行webpack

 

8.運行index.html

最後看下目錄結構爲：