webpack简单总结

Posted moran1992

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack简单总结相关的知识,希望对你有一定的参考价值。

这里用一个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简单总结的主要内容,如果未能解决你的问题,请参考以下文章

查看发票组代码后的总结和有感

webpack学习简单总结

webpack学习简单总结

JavaScript系列文章:React总结之Webpack模块组织

webpack4常用片段

Python学习总结