一、前端自动化构建工具是什么/有什么用
//www.greatytc.com/p/e290f9f53b7e
https://blog.csdn.net/wind_ghoul/article/details/79099322
https://www.imooc.com/article/66984
//www.greatytc.com/p/b85c52360b83
二、webpack3安装教程
参考链接（版本过老，有许多需要改进的地方）：//www.greatytc.com/p/42e11515c10f
新建项目文件夹，例如D:\work\webpack_test
先确保安装好了npm 和 node ，然后用管理员权限运行CMD，进入项目文件夹目录，
输入命令全局安装webpack（把-g改成--save可以局部安装，慢的话可以用cnpm：https://www.cnblogs.com/wenjunwei/p/10078460.html）
npm install webpack@4 -g
npm install webpack-cli -g
windows可能会出现fsevents@^1.2.7报错，但是可忽略：https://blog.csdn.net/Fabulous1111/article/details/79388841
然后建立package.json，一直回车默认就可以了
npm init
然后建立如下的目录结构，
其中app放项目源码，node_modules放用到的工具包之类的（全局安装的webpack暂时还没有这个文件夹，等打包过后就会自动生成了），public放页面文件以及到时候打包好的JS文件，其中node_modules和package是自动生成的，其他的文件代码如下
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
可见有两个JS文件，然后index.html只引用了bundle.js一个JS文件，所以我们就是要把前两个JS文件打包成一个JS文件（起减少请求、优化性能、提高速度的作用，文件量大的时候尤其如此）
使用webpack指令就可以完成打包
全局安装了的话，在项目文件夹直接使用：
webpack app\main.js -o public\bundle.js
局部安装的话要做该文件夹使用：
node_modules\.bin\webpack app\main.js -o public\bundle.js
打包成功，没有报错，index.html打开也正常。那么基本上说明安装成功了。
【可能遇到的问题：
---windows下的文件路径记得是用反斜杠 \
---如果打包成功，index.html浏览器显示失败，可以打开浏览器的console看看是不是权限不足，例如index.html在C盘的情况下
---想用回低版本
版本兼容性：https://blog.csdn.net/qq_27300101/article/details/80932670
低版本安装教程：https://blog.csdn.net/wanxue0804/article/details/79427332
---WARNING:The 'mode' option has not been set：//www.greatytc.com/p/d71b27d0dfb5
---package.json文件：//www.greatytc.com/p/b3d86ddfd555
】
三、使用教程
入门教程（有点过时了，要结合评论一起看）：//www.greatytc.com/p/42e11515c10f
官方文档：https://webpack.docschina.org/concepts/
1.命令简化
根目录新建webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项
还有一种常用的方法：修改根目录package.json，主要是在"scripts"中加入指令名字，
（npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build）
修改后类似于
{
"name": "webpack_1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
"author": "",
"license": "ISC"
}
然后使用命令 npm start 同样也可以执行打包操作了
2.使用webpack构建本地服务器
https://www.cnblogs.com/xuehaoyue/p/6410095.html
3.Loaders能调用外部的脚本或工具，实现对不同格式的文件的处理
3.1 babel编译器
babel可以帮助你编译ES6、ES7、React框架的JSX等浏览器不完全支持的语法，转化为浏览器可以执行的JS，用了babel就可以在开发中使用更加先进高效的JS
按这些命令安装所需工具
cnpm install -D webpack@4
cnpm install babel-core --save
cnpm install babel-loader@7 --save
cnpm install babel-preset-env --save
cnpm install babel-preset-react --save
cnpm install react --save
cnpm install react-dom --save
//否则会类似以下的错误：
（ Error: Can't resolve 'babel-loader' in 'D:\work\webpack_test'）
（Module not found: Error: Can't resolve 'react' in 'D:\work\webpack_test\app'）
（Error: Couldn't find preset "react" relative to directory "D:\\work\\webpack_test\\app"）
（Error: Couldn't find preset "env" relative to directory "D:\\work\\webpack_test\\app"）
这类问题的解决方法：安装没找到的包或依赖，cnpm install xxx -save
（Couldn't find webpack@2 | 3 | 4）
这类问题是需要特定版本的工具：那就下载相应版本的工具 cnpm install -D webpack@4
然后修改文件，使用ES6和React编写代码，webpack打包成浏览器可以执行的html。
先在app文件夹里面添加config.json
{
"greetText": "Hi there and greetings from JSON!"
}
修改其他文件
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
},
}
//Greeter,js
import React, {Component} from 'react'
import config from './config.json';
class Greeter extends Component{
render() {
return (
<div>
{config.greetText}
</div>
);
}
}
export default Greeter
// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
render(<Greeter />, document.getElementById('root'));
3.2CSS处理
3.2.1下载工具css-loader 和 style-loader
（css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。）
cnpm install --save-dev style-loader css-loader
修改webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
},
}
在app文件夹里创建一个名字为"main.css"的文件
/* main.css */
html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
并引用到main.js中去
//main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import './main.css';//使用require导入css文件
render(<Greeter />, document.getElementById('root'));
webpack后就可以在浏览器看到效果了。（index.html没有引入css，而是把css嵌入到了js中去，体现模块化的思想）
3.2.2实战CSS模块化——CSS module
被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。
先下载css-loader
cnpm install -D css-loader@2.0.0
修改webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
}
]
}
]
},
}
在app文件夹下创建一个Greeter.css文件
/* Greeter.css */
.root {
background-color: #eee;
padding: 10px;
border: 3px solid #ccc;
}
导入到Greeter.js中
import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入
class Greeter extends Component{
render() {
return (
<div className={styles.root}> //使用cssModule添加类名的方法
{config.greetText}
</div>
);
}
}
export default Greeter
webpack后检查结果（可见class类名后面加入了hash值，避免了类名重复冲突）
3.2.3 CSS预处理器
sass
less
4.插件（Plugins）
...
