zoukankan      html  css  js  c++  java
  • webpack学习01--基本使用

    1.使用npm下载webpack

    使用npm init初始化package.json文件

    npm init

    下载webpack和webpack-cli

    npm i webpack -g
    npm i webpack-cli -g

    2.测试webpack打包

    webpack默认只能处理js/json资源,不能处理img/css资源(需要loader)

    建立用于测试的data.json文件和index.js文件

    data.json

    {
        "name":"zhangsan",
        "age":18
    }

    index.js

    import data from "./data.json"
    console.log(data);
    
    function add(x,y){
        return x + y;
    }
    
    console.log(add(1,2));

    使用webpack-cli命令打包

    //开发环境打包命令:
    //webpack ./src/index.js -o ./build/build.js --mode=development
    
    //生产环境打包命令:
    //webpack ./src/index.js -o ./build/build.js --mode=production

    使用html文件引入打包好的js文件

    <html>
    <head>
        <script type="text/javascript" src='./build.js'></script>
    </head>
    
    <body>
    </body>
    </html>

    测试效果

  • 相关阅读:
    VueBlog
    java 代理模式
    集合框架
    面试题
    java 多线程
    网络编程
    HTTP
    MAVEN
    Redis高级
    深入浅出--梯度下降法及其实现
  • 原文地址:https://www.cnblogs.com/asenyang/p/14403355.html
Copyright © 2011-2022 走看看