webpack 简单使用

备注：
 使用yarn 结合npm 模块进行简单项目开发
1. 安装
yarn init 
yarn add webpack --dev
yarn global add live-server
2. 添加shoritd 依赖模块
yarn  add shoritd
3. 项目结构
├── index.html
├── main.js
├── package.json
├── show.js
├── webpack.config.js
└── yarn.lock
代码说明 
index.html
<html>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
show.js
function demo(content){
window.document.getElementById("app").innerText="this is a demo"+content;
}
module.exports=demo;
main.js
const shortid = require("shortid");
const demo = require("./show.js");
demo(shortid.generate());
webpack.config.js
const path = require("path");
module.exports = {
  entry:"./main.js",
  output:{
   filename:"bundle.js",
   path:path.resolve(__dirname,"./dist"),
  }
}
4. 构建
yarn run build
5. 效果
 
6. 参考资料
https://webpack.github.io/
https://www.npmjs.com/package/shortid

posted on 2017-12-29 10:15  荣锋亮  阅读(189)  评论(0)  编辑  收藏  举报

导航