第一步、
先去安装node环境,http://nodejs.org
第二步、安装好node之后安装npm【npm比较慢,建议使用淘宝镜像:cnpm】
安装 webpack,以全局的方式安装:
1
|
$ npm install webpack -g
|
然而,我并不喜欢这种方式,因为并不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
1
2
3
4
|
# 进入项目目录
# 确定已经有 package.json,没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev
|
安装的过程中可能会很慢,一直卡在那转圈。原因你懂得,我们上的是一个局域网,外面的世界不是你想看就能看的。。。。。如果你像我一样,不能FQ,那你就先
暂停吧。执行下面的语句:
1
|
npm config set registry https:
//registry.npm.taobao.org
|
用一下国内的良心镜像。你会发现再执行 npm install webpack --save-dev 会很快的安装完毕。安装完成之后,你会发现,项目中多了一个 node_modules文件夹
里面有一个 .bin和webpack文件夹。此时我们打开终端,输入 webpack会提示 webpak不是内部命令。不用怕,因为这个执行文件在你的项目下的 node_modules\.bin
下面,只要将这个路径配入 环境变量的 path中去 ,就可以愉快的使用 webpack了!
最后注意事项:
如果安装完后在你的安装目录下唯有package.json,只有node_modules这个目录的话,一般package.json这个文件在node_modules/webpack下,拷贝出来,放到你的安装目录下即可,
然后编写js文件,使用webpack hello.jshello_bundle.js,看是否出现如下提示:
如果是这样表示编译成功!
js文件中引入css文件
require("css-loader!/style.css")