大众点评(webpack)

在当前目录下打开命令行

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下