持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
webpack
1、全局安装 npm install webpack -g
npm install webpack@^4.39.2
npm install --save-dev webpack-cli@^3.3.7
2、项目安装步骤
1）创建站点
2）、npm init 初始化项目文件
3) 、npm install webpack@^4.39.2 --save-dev
npm install webpack-cli@^3.3.7 --save-dev
4）、安装官网简历测试文件和目录www.webpackjs.com/guides/gett…
加载lodash
webpack.config.js
多文件输入和输出
5）、css加载（css-loader、style-loader）
6）、图片加载、字体加载、json加载（file-loader）
7）、下载插件
8）、安装服务器webpack-dev-server
如果遇到npm install出现"Unexpected end of JSON input while parsing near"错误解决方法
执行：npm cache clean --force （删除缓存）
src放编译文件
dist放转译文件
react
1、安装babel-loader相关信息参照网址（webpack官网）：www.webpackjs.com/loaders/bab…
npm install babel-loader@8.2.2 @babel/core@7.5.5 @babel/preset-env@7.5.5 --save-dev(--save-dev可以用-D来代替)
2、安装babel支持的react的API（babel/preset-react）
npm install --save-dev @babel/preset-react@7.0.0
3、新建系统文件.babelrc(让webpack和es6支持reactAPI)
{
"presets": ["@babel/preset-env","@babel/preset-react"],
"plugins": []
}
4、安装react核心库：npm install react@16.9.0 react-dom@16.9.0 -D
5、配置webpack.config.js,把babel-loader加入rules，参照内容webpack官网（{test: /.js|jsx$/,use: 'babel-loader',exclude: /node_modules/}）
6、在index.html里添加一个div（
）7、修改index.js（利用react写组件）
import _ from 'lodash';
import React from 'react';
import ReactDOM from 'react-dom' ;
ReactDOM.render((
), document.getElementById('app'));
8、运行 npm start测试
常用配置说明
entry：打包的入口文件，一个字符串或者对象
output：配置打包的结果，一个对象
fileName：定义输出文件名，一个字符串
path：定义输出文件路径，一个字符串
module：定义对模块的处理逻辑，一个对象
loaders：定义一系列加载器，一个数组
test：正则表达式，用于匹配到的文件
loader/loaders：字符串或者数组，处理匹配到的文件。如果只需要用到一个模块加载器则使用
loader：string，如果使用多个模块加载器，则使用loader：array
include：字符串或者数组，值包含的文件夹
exinclude：字符串或者数组，指排除的文件夹
resolve：影响对模块的解析，一个对象
extensions：自动补全识别后缀，是一个数组
plugins：定义插件，一个数组
print.js：多文件输出
