这里用一个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)