Webpack2 完整踩坑教程(二)

本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

二．数据更新

1.创建src和dist两个文件夹，把index.js移动到src文件夹里，bundle.js是webpack打包生成出来的，使用先删除再生成的办法确保文件正常更新，以后会把dist作为生成文件存放的目标文件夹。
2.安装rimraf 用于打包前删除旧的生成文件：npm install rimraf –save-dev
3.修改package.json的script启动方式：

{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"rimraf dist && webpack src/index.js dist/bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"rimraf": "^2.6.1",
"webpack": "^2.2.1"
}
}

这里需要注意的是，当前目录路径需要加./，如：./src/index.js，这个坑曾经埋了我大半天。

4.运行 npm run build 打包一下，在dist目录下得到了bundle.js

5.把index.html里面引用bundle.js的路径改成./dist/bundle.js，再运行http-server测试，没毛病。
6.接下来在src目录下新建messages.js文件。

module.exports={ hi:'您好呀', event:'志玲姐姐'};

7.在index.js文件引入messages.js，并实例到页面

var messages=require('./messages');
app.innerHTML='

'+messages.hi+','+messages.event+"

";

8.把package.json修改一下，build的结尾加上监视命令–watch

"build":"rimraf dist && webpack src/index.js dist/bundle.js --watch"

9.运行npm run build重新打包，可以看到打包过程并没有结束跳出，仍然是待命状态。

10.另起一个cli，启动http-server -p 3000，在浏览器输入localhost:3000

修改messages.json消息内容，然后刷新浏览器，可以看到内容随即更新了。

<本节完>