zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    【小技巧】如何输入未知长度的数组,用回车结束输入
    Python基础(二)
    Python基础(一)
    Appium Mac 环境安装
    c# 多线程
    c# 并行计算
    C# 反射
    VI 编辑器
    Linq and Lambda
    WINDOWS 命令
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/8143082.html
Copyright © 2011-2022 走看看