nodejs，webpack安装以及初步运用
Posted *飛鱼*
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了nodejs，webpack安装以及初步运用相关的知识，希望对你有一定的参考价值。
nodejs安装：
1.下载：https://nodejs.org/en/download/
2.安装node-v6.11.3-x64.msi文件，直接默认安装（next……）；
3.验证是否完成安装：cmd 进入后输入命令 node -v 回车能得到nodejs版本号；
输入node 回车再输入console.log(\'aaaaa\') 回车能正常显示输出。
这表示nodejs安装成功。
webpack安装：
1.npm安装：在f盘新建文件夹webpack，在webpack文件夹建文件夹demo01；
shilt+右键打开命令窗口，在命令窗口输入npm install -g webpack，等待安装完毕；
在命令窗口输入webpack -h 查看安装的版本，恭喜你安装成功。
2.接下来就是写一个webpack配置文件
在demo01文件夹新建webpack.config.js文件
1 module.exports = { 2 entry: "./main.js",//入口文件，类似APP根文件 3 output: {//出口文件 4 filename: \'bundle.js\' 5 } 6 7 }
实例：在demo01文件夹新建index.html，main.js文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="bundle.js"></script> 7 </head> 8 <body> 9 </body> 10 </html>
1 document.write("Hello world")
在命令窗口输入webpack，会自动生成bundle.js文件
3.安装服务器
在命令窗口输入npm install live-server -g
安装好后启动服务器：在命令窗口输入live-server
/*或者安装webpack-dev-servera. npm install webpack-dev-server --save-dev
可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）
b. 在webpack.config.js中添加配置
var webpack=require(\'webpack\'); module.exports = { …… devServer: { historyApiFallback: true, inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些 }, plugins:[ …… new webpack.HotModuleReplacementPlugin() ] …… };
c.在package.json里配置运行的命令（npm支持自定义一些命令）
"scripts": { "start": "webpack-dev-server --inline"//注意：不写--hot，否则浏览器无法自动更新 },
d. 运行server
npm start- Error: .........（此处省略一堆错误）
- 解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）
npm install webpack
- 浏览器打开http://localhost:8080/
成功运行，且修改app中的js代码，浏览器会自动刷新！成功！*/
启动后会自动打开浏览器
webpack初步运用算是完成了。
以上是关于nodejs，webpack安装以及初步运用的主要内容，如果未能解决你的问题，请参考以下文章
windows 使用npm安装webpack 4.0以及配置问题的解决办法
第562期用 webpack 构建 node 后端代码，使其支持 js 新特性并实现热重载