三種Webpack打包方式(小結(jié))
準(zhǔn)備工作
mkdir webpack_demo && cd webpack_demo #新建文件夾 npm init #創(chuàng)建package.json文件 npm install --save-dev webpack #安裝依賴(非全局安裝) mkdir app && mkdir public #新建app和public文件夾 cd app && cd.>Greeter.js && cd.>main.js #app文件夾中創(chuàng)建Greeter.js和main.js cd .. && cd public && cd.>index.html #public文件夾中創(chuàng)建index.html
index.html寫入如下內(nèi)容:
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Demo</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html>
Greeter.js寫入如下內(nèi)容:
// Greeter.js module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hello webpack!"; return greet; };
main.js寫入如下內(nèi)容:
//main.js const greeter = require('./Greeter.js'); document.querySelector("#root").appendChild(greeter());
正式使用Webpack
1. 通過node_modules/.bin/webpack app/main.js public/bundle.js
命令
結(jié)果:
此時(shí),public文件夾里面多出了一個(gè)bundle.js文件,打開index.html出現(xiàn)Hello webpack!
2. 通過配置文件
在項(xiàng)目根目錄下(和package.json同級(jí))新建webpack.config.js,填入如下內(nèi)容:
module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包后的文件存放的地方 filename: "bundle.js"http://打包后輸出文件的文件名 } }
然后在終端運(yùn)行
node_modules\.bin\webpack
該命令會(huì)自動(dòng)調(diào)用webpack.config.js文件中的配置。
3. 更快的方式
第二種其實(shí)輸入的命令也比較麻煩,我們可以在添加了webpack.config.js后,再在package.json中對scripts進(jìn)行配置。
{ "name": "webpack_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.6.0" } }
在scripts中修改成鍵值對:”test”:”webpack”,在終端直接輸入命令:
npm test
注意:
如果將test改成test1則會(huì)報(bào)錯(cuò):
{ "name": "webpack_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test1": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.6.0" } }
輸入
npm test1
提示信息如下:
就是命令的名字需要是列舉的那一堆里面的,例如start,然后npm start。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
w3c聲明下可運(yùn)行 兼容性比較好的js對聯(lián)廣告集合
最近有美工朋友找我們要兼容性比較好的對聯(lián)廣告代碼,我們給他一個(gè)他竟然不能運(yùn)行,經(jīng)過排查,這是因?yàn)楝F(xiàn)在的廣告也用了一樣代碼,函數(shù)命名重復(fù)。2011-07-07模擬用戶點(diǎn)擊彈出新頁面不會(huì)被瀏覽器攔截
window.open被瀏覽器攔截導(dǎo)致頁面無法彈出,a標(biāo)簽的彈出就不會(huì)被瀏覽器攔截,下面有個(gè)不錯(cuò)的示例,大家可以學(xué)習(xí)下2014-04-04JavaScript原生節(jié)點(diǎn)操作小結(jié)
本文主要介紹了JavaScript原生節(jié)點(diǎn)操作的相關(guān)知識(shí)。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01javascript完整操作Table的增加行,刪除行的列子大全
非常漂亮的js操作table行代碼函數(shù)。比較方便2008-10-10js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框自動(dòng)選中內(nèi)容的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框自動(dòng)選中內(nèi)容的方法,涉及javascript鼠標(biāo)點(diǎn)擊事件onClick及選擇事件select的使用技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08