react+webpack搭建项目

什么是webpack

模块打包机：分析项目结构，从入口文件开始找到javascript模块和其他相关联的模块(css,jsx等)，将他们转化成浏览器可以识别的语言

为什么要用webpack

1.模块化，

2.可以将浏览器不能识别的语言转化成可以识别的语言

开始使用webpack

安装webpack的时候需要用到npm ,所以先去安装node.js,这个可以去node.js官网，也可以去国内镜像网站下载（网速慢的可以考虑一下）

安装完node之后可以看一下node的版本还有npm 版本

在安装之前需要初始化一下本地环境

这时候会出来一堆东西，如果想要在npm上发布你的模块的话可以填一下，不需要的话一直回车就好

填完之后会在项目下自动生成package.json文件，里面的内容就是你刚才填的内容

接下来安装webpack

有两种方式，

1安装在当前项目下

npm install --save-dev webpack

2,全局安装

npm install -g webpack

这样webpack就安装成功了，之后在项目中建两个空文件夹app和public，名字可以随意，然后app里面是我们之后要进行开发的模块，public里面是浏览器可以识别的文件，包括index.html,以及之后webpack打包生成的bundle.js

创建完成之后在public文件夹里面创建index.html,在app文件夹里面创建main.js 和great.js

index.html文件里面写下面的内容

great.js里面写一些想在页面中显示的内容，比如：hello webpack

然后mian.js用来将great.js暴露的节点显示在页面上

编写完成后就可以用webpack进行打包操作了

app/main.js在需要打包的文件，也就是项目的入口文件

public/bundle.js 是打包完成之后浏览器需要用到的文件

然后在浏览器中打开之前在public文件夹中创建的index.html,就可以看到hello webpack！了

到这里为止，webpack打包的基本操作就算完成了。

在打包的时候我遇到了几个问题，在这记录一下：

在webpack3.0的情况下全局安装和当前项目下安装都不会有什么问题，但是webpack4.0如果是当前项目下安装的话，在后面运行webpack时就会出现 webpack不是内部命令，解决方案就是改用全局安装 npm install webpack -g,

全局安装完成之后再去打包项目的时候可能会有提示安装 webpack-cli ,这时候我们选择安装webpack-cli

npm install webpack-cli --save-dev

提示安装成功之后再去打包的话会再次提示安装webpack-cli ,但其实我们刚才已经安装过了，在package.json中也可以找到webpack-cli

并且在node_modules中也可以找到webpack-cli文件夹

这是因为在webpack3.0里面，webpack和cli是在一个包里面的，而在webpack4.0中是在不同包里面，这时候就需要我们全局安装一下webpack-cli

之后就不会出现安装webpack-cli的提示了

然后在打包的时候出现了 Error: Cannot find module '@babel/core' 这个问题，但是在package.json里面是有bable-core的，

上网查了一下之前也有人遇到这个问题，他的做法是把babel-loader的版本降低到7.1.5，尝试了一下确实有用，先记录一下，之后再找找8.0.4版本下的解决方案

下面就来说说如何用配置文件进行打包

首先，在根目录下创建webpack.config.js,文件

然后加入在文件中加入入口文件和出口文件

module.export={

entry:"./main.js",

output:{

“path":''./public"

"filename":"bundle-[hash].js"//webpack可以把一个哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前

}

}

配置完成后在命令行输入webpack然后回车就可以进行打包了，这个方法比之前的方法要方便很多，不用在命令行输入很长的代码，不容易出错，就是在写入口文件和出口文件的路径时需要注意一下，不要写错就ok了

还有一种比这个方法更简便的，在命令行甚至都不需要输入webpack就可以打包

这时候就需要用到package.json文件了，打开package.json文件后添加如下配置

完成之后只需要在命令行输入npm start就可以打包，当然配置文件中的start也是可以修改的，比如我可以修改成dev

这时候配置文件就变成了这样

这时，打包的时候需要在命令行输入命令是npm run dev

运行结果和之前一样

之后来看一下webpack的其他配置吧

1，打包速度devtool

打包速度由上到下依次增加，优缺点也比较明显，这种情况的话需要根据不同的项目需求选择适合的参数

如果是在本地demo的话比较推荐eval-source-map，开发速度较快，但是存在安全隐患，

具体设置见下图

2搭建本地服务devserver

具体配置见下图

配置完成之后使用 npm run server 开启服务，看到页面的地址变为localhost:8080

在开启服务之前需要先在项目中安装webpack-dev-server

安装完成之后需要修改一下package.json中的配置文件，见下图

3.Babel

babel其实就是一个javascript平台，它可以让浏览器识别es6+,以及react中的jsx等等

在使用之前需要引入一些依赖，多个依赖一起引入的话可以用空格隔开

这里需要用到react的一些东西，当然也可以不用，只是举例比较方便而已，先引一下react 和react-dom吧安装方法和之前都一样，也是npm install react react-dom

完成之后在webpack.config.js中对Babel进行配置

现在我们已经可以使用react中的jsx语法和es6来写代码了

然后我们对great.js 进行react写法的改造，不熟悉react的话可以不改，结果都是一样的

然后修改main.js

到这里babel的配置基本完成

4.loaders

loader的作用浏览器不能识别的格式转化成可以识别的格式，常用到的loaders包括css-loader,style-loader,

json-loader等等

在配置loader之前可以先在app文件夹里面创建一个带有数据的config.json文件。里面的内容其实就是一条json格式的数据

然后修改great.js中的内容