webpack 入門指南

webpack

第一步:創(chuàng)建webpack-demo目錄,并且切到這個(gè)目錄下面,隨后初始化生成package.json且安裝webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

第二步:詳細(xì)操作步驟
(1)安裝lodash

npm install --save lodash

(2)隨后創(chuàng)建 app 子目錄下創(chuàng)建一個(gè) index.js 文件。

//引入lodash
import _ from 'lodash';

function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['hello', 'world'], ' ');
  return element;
}
document.body.appendChild(component());

(3)在app目錄下創(chuàng)建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 2 demo</title>
</head>
<body>
    <script type="text/javascript" src='dist/bundle.js'></script>
</body>
</html>

(4) 在app目錄下創(chuàng)建webpack.config.js

var path = require('path');

module.exports ={
    entry:'./app/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

(5) package.jsont中添加配置

"scripts": {
        "build":"webpack"
 },

第三步:運(yùn)行

npm run build

第四步:用瀏覽器打開index.html查看效果

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

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

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