zoukankan      html  css  js  c++  java
  • webpack安装教程及实例

    在控制台输入:

    npm install webpack -g

    这是全局的安装,如果需要局部安装,在控制台cd 打开到指定目录,输入:

    npm install webpack --save-dev

    即可。

    实例:

    1. 建立index.html文件
    2. 建立main.js文件
    3. 建立webpack.config.js文件

    index.html

    <html lang="en">
     
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
     
    </head>
     
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
     
    </html>

    main.js

    document.write("<h1>Hello World</h1>");

    webpack.config.js

    module.exports = {
        entry: "./main.js",//这是源文件
        output: {
            filename: 'bundle.js' //这是生成的新文件
        }
    };

    三个文件创建好之后,我们需要把项目运行起来,使用live-server来运行项目。

    在控制台直接输入:

    npm install live-server -g

    安装成功之后,在控制台cd打开到项目的根目录,然后在控制台先输入webpack命令,webpack就是执行打包指令,打包成功之后,

    在控制台输入:

    live-server

    即可运行项目。

  • 相关阅读:
    Event bubbling
    input/change event practice
    Form event
    Event_Object
    DOM_this keyword
    Random color generator exercise
    DOM_events_addEventListener
    Spring值SpEL
    Spring之使用外部属性文件
    Spring之Bean的作用域
  • 原文地址:https://www.cnblogs.com/Mrrabbit/p/7278226.html
Copyright © 2011-2022 走看看