分享webpack實例教程

Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。

安裝 Webpack

在安裝 Webpack 前，你本地環(huán)境需要支持 node.js。

由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm

首先全局安裝webpack，再npm初始化一個項目，并局部安裝webpack開發(fā)工具

$ npm install webpack -g

npm init (項目名稱)    $ npm install webpack-dev-server --save-dev

在項目目錄下創(chuàng)建app文件夾，并創(chuàng)建index.js文件，寫入如下代碼

console.log('hello world');

在項目文件夾下打開命令行，輸入如下命令

webpack app/index.js build/index.js

出現(xiàn)如下代碼即為成功

看下build/index.js文件的代碼：

可以看到73行就是我們app/index.js 文件的代碼

具體源碼等改天我們再分析，今天我們主要的目的是體驗。

這樣一個一個代碼敲效率太低，我們可以通過webpack.config.js文件來完成更高級的功能。