• 技术文章 >web前端 >js教程

    webpack是基于node.js的吗

    青灯夜游青灯夜游2022-07-12 18:57:20原创124

    webpack是基于node.js的。webpack是一个用于现代JavaScript应用程序的静态模块打包工具,是基于node.js开发的,使用时需要有node.js组件支持;需要使用npm或者cnpm进行安装,语法“cnpm install webpack -g”。

    本教程操作环境:windows7系统、nodejs16版,DELL G3电脑。

    webpack 是代码编译工具,有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。

    webpack是一个前端打包工具,基于node.js开发的,使用时需要有node.js组件支持。

    安装 Webpack

    ① Webpack的运行需要依赖Node.js,因此需要先安装Node.js。

    安装完成之后在命令行窗口输入下面两行命令,若有出现版本号则安装成功。

    $ node -v$ npm -v

    ② 接着就可以通过npm(一个基于Node.js的包管理工具)来安装Webpack咯

    因为npm的源在国外,所以安装速度可能比较慢。建议大家可以用淘宝的npm镜像cnpm。但是要注意的一点是,cnpm中有一些包会不太一样(一般来说不影响使用)

    通过下面这行代码即可完成cnpm的配置

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

    使用 cnpm 安装 webpack:

    cnpm install webpack -g

    创建项目

    接下来我们创建一个目录 app:

    mkdir app

    在 app 目录下添加 runoob1.js 文件,代码如下:

    app/runoob1.js 文件

    document.write("It works.");

    在 app 目录下添加 index.html 文件,代码如下:

    app/index.html 文件

    <html>
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
        </body>
    </html>

    接下来我们使用 webpack 命令来打包:

    webpack runoob1.js bundle.js

    执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件,成功后输出信息如下所示:

    Hash: a41c6217554e666594cb
    Version: webpack 1.12.13
    Time: 50ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.42 kB       0  [emitted]  main
       [0] ./runoob1.js 29 bytes {0} [built]

    在浏览器中打开 index.html,输出结果如下:

    1.jpg

    更多node相关知识,请访问:nodejs 教程

    以上就是webpack是基于node.js的吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:node nodejs webpack
    上一篇:node.js gm是什么 下一篇:简单了解JavaScript事件的冒泡、委派、绑定和传播
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• node能降级吗• node中什么是全局包• reactjs只能在node中运行吗• 总结分享了解nodejs的几个关键节点• node和php有啥区别• npm和node.js有什么关系吗
    1/1

    PHP中文网