webpack
第一步：创建webpack-demo目录，并且切到这个目录下面，随后初始化生成package.json且安装webpack
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
第二步：详细操作步骤
（1）安装lodash
npm install --save lodash
（2）随后创建 app 子目录下创建一个 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目录下创建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目录下创建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"
},
第三步：运行
npm run build
第四步：用浏览器打开index.html查看效果
效果
网友评论