node.js+webpack项目安装简易流程,及遇到的小坑

安装过程

1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js。
2.用 npm 安装 Webpack:
这里我们使用的是将webpack安装到项目依赖中,这样就可以使用项目本地版本的 Webpack。

# 进入项目目录
# 确定已经有 package.json,没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev

也可以将webpack安装到全局模式下:

$ npm install webpack -g

可以通过命令行 webpack -h 试

  Webpack 目前有两个主版本,一个是在 master 主干的稳定版,一个是在 webpack-2 分支的测试版,测试版拥有一些实验性功能并且和稳定版不兼容,在正式项目中应该使用稳定版。

# 查看 webpack 版本信息
$ npm info webpack

# 安装指定版本的 webpack
$ npm install webpack@1.12.x --save-dev

如果需要使用 Webpack 开发工具,要单独安装:

$ npm install webpack-dev-server --save-dev
使用

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

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')

然后编译 entry.js 并打包到 bundle.js:

$ webpack entry.js bundle.js
$ webpack entry.js bundle.js 遇到错误

提示错误:

bash:webpack:command not found

产生错误原因:
  打包时指定了入口文件后,webpack将自动识别所依赖的其它文件,不过需要注意的是如果你的webpack 不是全局安装的那么当你在终端使用此命令时需要额外指定其在node_modules中的地址
修改方法:

node_modules/.bin/webpack entry.js bundle.js
打包运行

打包过程会显示日志:

Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]

用浏览器打开 index.html 将会看到 It works. 。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值