记录如何搭建一个最简单的能跑的项目!html
1.首先,须要下载安装nodejs环境,能够直接百度搜索nodejs去官网下载符合你操做系统的环境。node
安装完nodejs后,在控制台输入命令:webpack
npm -versionweb
若是成功看到nodejs的版本,那么说明环境已经成功安装了!npm
2.新建package.jsonjson
打开命令行工具(CMD),把路径切换到webpack项目路径下,个人项目路径是D:\WorkSpace\webpack\testProject1
因此我在CMD中输入
D: //切换到D盘
cd D:\WorkSpace\webpack\testProject3 //切换到项目路径下webpack-dev-server
而后咱们使用命令
npm init //建立package.json文件
来建立package.json
我使用package.json的默认参数,因此,一直回车确认便可.
最后在Is this OK? (yes)输入y便可建立完毕package.json工具
3.建立webpack.config.js文件this
刚刚的package.json文件是经过命令建立的,webpack.config.js文件就要本身手动建立了
module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: "bundle.js"
},
}
//思考entry为何是 './index.js'
新建文件,把上面一段代码写入js文件操作系统
4.建立前台页面
在项目路径根目录下建立index.html和index.js文件
index.html文件
<script src="bundle.js"></script> //思考为何是bundle.js而不是index.js
index.js文件
document.write("hello world")
5.npm start启动项目
如今,基本项目文件都有了,已经能够开始尝试启动项目了
在CMD控制台输入命令
npm start
会发现启动报错 --npm ERR! missing script: start
这是由于在package.json文件中没有找到对应的命令
因此须要添加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot --inline",
"start": "webpack-dev-server --hot" //添加这段代码
},
继续 npm start
而后发现报错
'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
这是由于须要安装webpack-dev-server 模块
输入命令(我所安装的模块包都是安装在全局变量下)
npm install webpack-dev-server -g
继续 npm start
继续报错
Error: Cannot find module 'webpack'
这是由于须要安装webpack 模块
输入命令
npm install webpack -g
继续 npm start
继续报错
Error: Cannot find module 'webpack-cli/bin/config-yargs'
这是由于须要安装webpack-cli 模块
输入命令
npm install webpack-cli -g
继续 npm start
继续报错(也可能不报错)
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
其实项目如今已经成功跑起来了,只是加载js报错了
这是由于须要安装start-webpack-dev-server-hot 模块
输入命令
npm install --save-dev start-webpack-dev-server-hot
最后再启动的话,项目就成功没有报错运行了到这里,一个最简单的webpack的helloworld案例就完成了!