1.pc端中后台应用打包
npm组件在浏览器的js中不能直接引入，所以要借助webpack等工具
jsx在浏览器端也是无法直接解析，要用工具转换
页面打包速度和资源体积问题
4.构建工具需要原因:
转换es6语法、JSX
css前缀补全/预处理器
压缩混淆
图片压缩
5.webpack原因
github活跃量
社区生态丰富
配置灵活，插件化扩展
官方更新迭代快
6.零配置webpack:
只有entry和output,entry指定默认的entry为： ./src/index.js.
output指定默认的为： ./dist/main.js
8.
>//使用以下命令：
./node_modules/.bin/webpack
生成bundles.js文件.
下一步，在bundles.js同级目录下新建index.html文件，在此文件的script标签的src中引入bundles.js，用浏览器打开，即可
9.在package.json中增加“build”,执行“npm run build”,也可生产bundle.js文件
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build":"webpack"
},
10.entry用法：
单入口：entry是一个字符串；多入口：entry是个对象（key-value）
11.Output用来告诉we'b'pack如何将编译后的文件输出到磁盘。
output的多入口配置：通过占位符确保文件名称的唯一，如[name].js
12.loaders:
webpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把它们转化成有效的模块，且可以添加到依赖图中。本身是一个函数，接受源文件作为参数，返回转换的结果。
babel-loader 转换ES6,ES7等js新特性语法
css-loader file-loader等等
module rules中test指定匹配规则，use指定使用的loader名称
13.plugins:
插件用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程
任何loaders没法做的事情，可以用plugins完成
CommonChunkPlugin ZipWebpackPlugin....
14.mode:
mode指定当前的构建环境是production development还是none
设置mode可使用webpack内置的函数，默认为production
15.解析ES6 react jsx：
rules:[
{
test:/.js$/,
use:'babel-loader'
}
]
//安装必要的文件：
npm i @babel/core @babel/preset-env babel-loader -D
*在vscode中的html文件中输入!，在弹出的下来提示中选择“!”，回车，就会出现一个默认的html文件模板出来！
//增加react的babel preset配置：
{
"preset":[
"@babel/preset-env",
"@babel/preset-react"
],
}
//安装必要的文件：
npm i react react-dom @babel/preset-react -D
16.解析CSS LESS SASS
css-loader用于加载.css文件，并且转换成commonjs对象
style-loader将样式通过<style>标签插入到head中
* <script src="./search.js" type="text/javascript"></script> //其中是type
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test:/.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
//search.css search.less:
.search-text {
font-size: 20px;
color: #f00;
}