webpack ( 一 ) 安装

最新推荐文章于 2025-05-28 17:44:09 发布

转载最新推荐文章于 2025-05-28 17:44:09 发布 · 227 阅读

wabpack 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何安装Webpack及其开发服务器，并通过示例演示了Webpack的基本使用流程，包括配置静态页面和打包JavaScript文件。

webpack的安装基于node的npm模块，所以要先安装node环境，再用npm安装webpack。

安装：

1.全局安装
$ npm install webpack -g
可用webpack -v查看安装版本
2.项目目录安装
$ npm install webpack --save-dev
结尾处--save-dev 表示写入package.json，方面以后安装
3.如需安装webpack开发工具，单独安装
$ npm install webpack-dev-server --save-dev

webpack的安装基于node，所以要先安装node环境，安装完成后，再用npm安装webpack。

使用：

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：

<!-- index.html -->
<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
    //注意：引入的是bundle.js
      <script src="bundle.js"></script>
    </body>
</html>

// entry.js
document.write('It works.')

然后编译 entry.js 并打包到 bundle.js：
cmd命令行
$ webpack entry.js bundle.js
打包过程会显示日志：


213