Webpack2 入门踩坑教程（二）

• 上节Webpack2 入门踩坑教程（一）：http://blog.csdn.net/Echo601/article/details/76174694

二．数据更新

• 创建src和dist两个文件夹，把index.js移动到src文件夹里，bundle.js是webpack打包生成出来的，所以先将bundle.js删除，周再来重新生成以确保文件正常更新，以后会把dist作为生成文件存放的目标文件夹。
• 安装rimraf 用于打包前删除旧的生成文件：

npm install rimraf –save-dev 

• 修改package.json的script启动方式：

{  "name": "webpack-test",  "version": "1.0.0",  "description": "根据webpack2完整踩坑教程学习",  "main": "./src/index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build":"rimraf dist && webpack ./src/index.js ./dist/bundle.js"  },  "repository": {    "type": "git",    "url": "git+https://github.com/EarlEcho/webpack-test.git"  },  "author": "EarlEcho",  "license": "ISC",  "bugs": {    "url": "https://github.com/EarlEcho/webpack-test/issues"  },  "homepage": "https://github.com/EarlEcho/webpack-test#readme",  "devDependencies": {    "rimraf": "^2.6.1",    "webpack": "^3.4.1"  }}

• 要注意的是，里面的index.js bundle.js的路径需要加 ./ 表示当前路径，这个坑也埋了我大半天。
  然后命令行：

webpack ./src/index.js ./dist/bundle.js

• 运行 npm run build 打包x项目，在dist目录下就得到了bundle.js

• 把index.html里面引用bundle.js的路径改成./dist/bundle.js，再运行http-server -p 3000测试，打开浏览器可以看到内容。

• 接下来在src目录下新建一个messages.js文件，输入以下：

module.exports={    hi:'hello',    event:'EarlEcho'};

• 在index.js中引入messages.js，并实例到页面

var messages = require('./messages')var app = document.getElementById('app');app.innerHTML = '<p>' + messages.hi + ',' + messages.event + "</p>"

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

"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "rimraf dist && webpack ./src/index.js ./dist/bundle.js --watch"},

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

• 另起一个cli，启动http-server -p 3000，在浏览器输入localhost:3000，就可以看到messages.js中的内容了。

项目结构如下：