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