1.下载nodejs并安装
2.运行cmd,输入node -v 和 npm -v,如果能显示版本号,即安装成功
3.输入 npm install -g cnpm --registry=https://registry.npm.taobao.org,使用淘宝镜像cnpm代替npm安装
4.输入cnpm install npm -g更新npm (因为随nodejs下载下来的npm不是最新版本,而且后面插件的下载需要依赖最新的npm)
5.输入cnpm install webpack -g 全局安装wenpack(如果之前全局安装过,可不用重复装)
6.在磁盘下新建一个项目文件,进入该项目文件,上面除了在全局安装webpack外,在这文件夹本地内也需要再次安装webpack,输入:
mkdir hellowebpack(项目文件夹名字可以自定义)
cd hellowebpack
npm init (可一直回车确认)
cnpm install webpack --save-dev
(之前少了cnpm install webpack --save-dev 这一步报错,导致运行webpack报错,如下所示:)
7.在项目文件内新建三个文件:index.js、sub.js、webpack.config.js,具体文件位置如下所示:(package.json文件是上述执行npm init生成的,node_modules文件夹是上述执行cnpm install webpack --save-dev生成的)
8.index.js、sub.js和webpack.config.js内容如下所示:
9.安装plugin插件,输入cnpm install html-webpack-plugin --save-dev(开始忘记安装,提示报错如下)
安装成功,如下所示:
10.输入webpack运行,此时根目录下回生成一个build文件,双击index.html,即能看到效果已经成功了
11.安装webpack热替换,在本地项目根目录下,输入cnpm install webpack-dev-server --save-dev
12.配置package.json和webpack.config.js文件(添加下述代码)
13.执行npm start,如下所示,即成功安装热替换
14.在浏览器网址输入:localhost:8080,修改index.js或sub.js的内容,保存,浏览器将会同步刷新
2016.13.12跟新