2-1 Webpack 初接觸

1.安裝webpack

npm install webpack -g

webpack -h ? 查看幫助


2.項(xiàng)目中增加webpack依賴

# 進(jìn)入工程目錄

# 項(xiàng)目初始化完成,生成package.json,命令npm init

# 安裝webpack以來

npm install webpack --save-dev

webpack目前有2個(gè)版本,穩(wěn)定版和開發(fā)版(webpack-2分支)

# 查看 webpack 版本信息

npm info webpack

# 安裝制定版本的webpack

npm install webpack@1.12.x --save-dev

# 安裝webpack 開發(fā)工具

npm install webpack-dev-server --server-dev


3.構(gòu)建Hello Word

(1) 在工程目錄下新建index.js文件

document.write('Hello World !');

(2) 在工程目錄下運(yùn)行

webpack index.js bundle.js

可以看到生成 bundle.js文件,可以新建index.html文件,引入bundle.js,運(yùn)行hello word

(3) 新建module01.js

document.write('Hello Module01 !');

(4) 修改index.js文件

document.write('Hello World !');

let _str = require('./module01');

document.write(_str);

可以看到生成 bundle.js文件,可以新建index.html文件,引入bundle.js,運(yùn)行hello word

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容