webpack建立vue工程记录，摘自vue.js实战第十章，首先安装node.js和npm
1.建立目录demo，并cmd切换到目录下，执行npm init，有一些选项可以填写，也可一路回车，最后在目录下生成文件package.json.内容如下：
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2.本地局部安装webpack:执行npm install webpack@2.3.2 --save-dev,这里加上版本号是为了保证和下面的webpack-dev-server版本兼容。如果出现 Unexpected end of JSON input while parsing near '...":{"@webassemblyjs/as类似的错误，先清除缓存再重新安装，清除命令：npm cache clean --force，如果出现错误npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/json5 (over 30000ms)，修改npm镜像源，最后下载完后demo目录下会多node_modules文件夹。
3.安装webpack-dev-server，执行npm install webpack-dev-server@2.11.5 --save-dev。安装完成后，package.json文件中会多以下内容：
"devDependencies": {
"webpack": "^2.3.2",
"webpack-dev-server": "^2.11.5"
}
4.在demo下新建webpack的配置文件webpack.config.js，内容如下：
var config = {};
module.exports = config;
5.在package.json的scripts里增加快速启动webpack-dev-server服务的脚本，如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
}
6.在demo下新建main.js，然后在webpack.config.js中配置入口和输出，修改后的webpack.config.js内容如下：注意__dirname前面有两个下划线。
var path = require('path');
var config = {
entry: {
main: './main'
},
output: {
path: path.join(__dirname,'./dist'),
publicPath: '/dist/',
filename: 'main.js'
}
};
module.exports = config;
7.在demo下新建index.html文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
</head>
<body>
<div id="app">
hello world.
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
8.执行npm run dev，会自动打开浏览器界面，如下图：
4084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
