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

最后看下目錄結構為：

?

posted on 2017-05-09 16:57?趙大海 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/zhaodahai/p/6831434.html

總結

以上是生活随笔為你收集整理的webpack入门之简单例子跑起来的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。