jsp入门教程 webpack入门必知必会(4)

//安装

npm install --save-dev html-webpack-pugin

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持梦搏网络！

webpack入门+react环境配置

[8119]

webpack 基本安装

开始前还是万万不能缺少的安装：

npm install webpack -g

安装完接着是建个文件夹新建一个package.json依赖管理文件

npm init //运行后 按提示填写 当然嫌麻烦 就直接下一步 下一步就好 无伤大碍

现在安装我们的webpack

完后新建一个文件并命名为webpack.config.js（如同我们的常规的 gulpfile.js、Gruntfile.js），就是一个配置项，告诉 webpack 它需要做什么。

打开webpack.config.js引入webpack

var webpack = require('webpack');

webpack 基本入门

webpack主要结构分三个：入口文件配置（entry）、入口文件输出配置（output）、加载器配置（module）、其他配置（resolve）

入口文件配置

入口文件输出配置

加载器配置

其他配置

ok！好记忆不如烂笔头，现在我们来自己搭建一个react的开发环境吧！

先参考我的目录结构

build存放编译后的文件，development存放react代码的文件夹，components存放react组件的文件夹，node_modules存放安装的依赖

我们先要安装一些项目依赖：

要是安装失败那就分开一个个装，还不行就用淘宝的cnpm装 ，还不行就看看你的node和npm的环境变量等配置（亲身体会T_T）

npm install cnpm -g

行！接下来是文件的内容

webpack.config.js文件的配置如下：

main.js内容如下：

index.js内容如下：

index.html内容如下：

将上面的文件写好后并放到对应文件夹内运行命令npm run build dev，成功后浏览器访问地址location:8080，就会显示出对应界面

结果：

hello react&es2015&webpack!!!

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持梦搏网络！

详解JS: reduce方法实现 webpack多文件入口

[7915]

1. reduce 方法介绍

1.1 简单场景

reduce 函数的设计意图就是方便进行叠加运算：

上述代码中，reduce 方法有两个参数，第一个参数是一个 callback，用于进行计算的函数；第二个参数则是累加计算的初始值: 0

reduce 以 0 作为初始值，从数组第 0 项开始累加，上述代码的计算过程如下：

若不设置初始值 0，则 reduce 以数组第 0 项作为初始值，从第 1 项开始累加，其计算过程如下：

可以看出，reduce 函数根据初始值 0，不断进行叠加，完成最简单的数组累加。

1.2 两种简单的运用场景

第一个 demo，使用 reduce 函数进行二维数组的拼接：

第二个 demo，使用 reduce 函数构造 JSON 数组：

灵活使用 reduce 函数，能为我们节省不少中间变量和代码。

2. 用于实现 webpack 多文件入口配置

webpack 配置项中entry参数用于配置入口文件路径，通常对于只打包一个目录下的文件，只需要遍历该目录，构造一个如下的对象传递给entry即可：

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-86052-4.html