这里用一个react例子来总结webpack~
安装搭建node环境
下载node地址：https://nodejs.org/en/download/
测试环境是否安装成功，安装成功之后执行命令可以看到node的版本号。
1 node -v//查看node版本
查看npm版本
1 npm -v//查看npm版本
现在准备环境做好，开始webpack之旅。
首先利用npm生成一个package.json文件，这里生成一个默认的就可以。
1 npm init -y
安装之后的package.json
1 { 2 ??"name": "webpacktest", 3 ??"version": "1.0.0", 4 ??"description": "", 5 ??"main": "index.js", 6 ??"scripts": { 7 ????"test": "echo \"Error: no test specified\" && exit 1" 8 ??}, 9 ??"keywords": [],10 ??"author": "",11 ??"license": "ISC"12 }安装webpack
安装webpack 有两种方式，一种是全局安装
1 npm install -g webpack
一种是依赖安装，将webpack信息依赖到package.json中
1 npm install --save-dev webpack
这里采用第二种安装方式，安装之后会发现在package.json中的变化，package.json中多了webpack的信息。
1 { 2 ??"name": "webpacktest", 3 ??"version": "1.0.0", 4 ??"description": "", 5 ??"main": "index.js", 6 ??"scripts": { 7 ????"test": "echo \"Error: no test specified\" && exit 1" 8 ??}, 9 ??"keywords": [],10 ??"author": "",11 ??"license": "ISC",12 ??"devDependencies": {13 ????"webpack": "^4.1.0"14 ??}15 }要基于react，所以还要安装一些必要的包
1 npm install react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
安装之后的package.json
1 { 2 ??"name": "webpacktest", 3 ??"version": "1.0.0", 4 ??"description": "", 5 ??"main": "index.js", 6 ??"scripts": { 7 ????"test": "echo \"Error: no test specified\" && exit 1" 8 ??}, 9 ??"keywords": [],10 ??"author": "",11 ??"license": "ISC",12 ??"devDependencies": {13 ????"babel-core": "^6.26.0",14 ????"babel-loader": "^7.1.4",15 ????"babel-preset-es2015": "^6.24.1",16 ????"babel-preset-react": "^6.24.1",17 ????"react": "^16.2.0",18 ????"react-dom": "^16.2.0",19 ????"webpack": "^4.1.0"20 ??}21 }查看webpack版本号
1 webpack -v
执行结果
这里应该注意的是webpack在4.0.0以后cli这个包单独分出来了，需要重新安装一下，执行命令
1 npm install webpack-cli -D
然后查看版本号
发现还是不行，解决方法：npm i -g webpack-cli -D --save(来自stackoverflow)
webpack简单总结
原文地址：https://www.cnblogs.com/moran1992/p/8523715.html