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 = '
' + messages.hi + ',' + messages.event + "
"

• 把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中的内容了。

项目结构如下：