- 上节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中的内容了。
项目结构如下: