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查看效果
效果