在当前目录下打开命令行
shift+鼠标右击(打开命令行窗口)
项目环境搭建
参考资料
https://segmentfault.com/a/1190000006178770
1.创建package.json文件
npm init
2.安装依赖插件
配置package.json文件(devDependencies为开发依赖插件，将在项目上线后自动卸载；dependencies为项目运行必需插件，始终存在。)
"devDependencies": {
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
命令行输入
npm i
指令执行后将在项目根目录生成包含插件的node_modules文件夹
(之后需要任何插件，同样只需在package.json中配置，通过 npm i 指令即可一次性安装。)
3.创建app文件目录
app文件用于存放原始数据和js模块
4.创建public文件目录
public文件夹用于存放供浏览器读取的文件。包括使用webpack打包生成的js文件及一个index.html文件
5.打包文件
配置webpack.config文件
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名(若无改文件,将自动在path目录下创建一个)
}
}
打包文件至指定目录
npm start
此时可通过public目录下的index.html查看运行效果
6.创建服务器以在端口中查看运行效果
修改package.json即可,详见资料
启动服务器
npm run server
完整开发环境文件目录结构
关于 -g
命令中，全局安装（global）和本地安装（local）方式的区别为带参数-g和不带参数-g。
具体区别：
npm install moduleName ，则是将模块下载到当前命令行所在目录。
npm install moduleName -g ，模块将被下载安装到全局目录中，即Node的安装目录下的node_modules下
