必须了解的知识：
- Webpack 使用指南 https://www.jianshu.com/p/213ab85d3be4
- AMD 和 CMD https://www.jianshu.com/p/08ce6d8a8d76
一、安装Node.js
node.js：https://nodejs.org/en/
无脑安装即可，环境变量是自动添加的，习惯看一下，计算机-系统设置-高级设置-环境变量-Path。
二、使用 node.js 安装三个全局 npm包
npm install -g webpack
npm install -g webpack-cli
npm install -g less //测试lessc a.less b.css
三、less 插件
npm install --save-dev less-loader
npm install --save-dev css-loader
npm install --save-dev style-loader
测试：
body{
background-color: aqua;
@color: #666;
div{
width:200px;
height:200px;
background-color: @color;
border: 1px solid #333;
}
}
//main.js
import "./a.less"
四、babel 插件一共五个
npm install --save-dev babel-core@6 babel-loader@7 babel-preset-env babel-preset-react babel-plugin-transform-object-rest-spread
这里有两个插件不能安装最新的版本，因为兼容问题会与最新版的 webpack4 发生兼容问题，所以的指定版本。就是这两个：babel-core@6 和 babel-loader@7
五、安装react的依赖
npm install --save react
npm install --save react-dom
六、补充
首先我们在引入内部文件的时候，工作时，通常喜欢省略扩展名。比如：
import App from "./App.js";
可以省略为
import App from "./App";
我们还有一个需求，就是 Index.js 这个组件，我们希望可以省略：
import Foo from "./foo/Index.js";
现在可以省略为：
import Foo from "./foo";
打开 webpack 的官网，看手册。 https://www.webpackjs.com/configuration/
配置如下：
resolve: {
//自动解析确定的扩展。默认值为：
extensions: [".js", ".json", ".jsx", ".css"],
//解析目录时要使用的文件名。默认：
mainFiles: ["index","Index"]
}
七、启动
//webpack.config.js
var path = require("path");
module.exports = {
mode:"development",
entry:"./js/main.js",
output:{
path:path.resolve(__dirname,"dist"),
filename:"all.js"
},
watch:true,
module:{
rules:[
{
test:/\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
//上面的另一种写法
//use: ['style-loader', 'css-loader','less-loader']
]
},
{
test: /\.m?js$/,//匹配.mjs和.js结束的文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react'],
plugins: ["transform-object-rest-spread"]
}
}
}
]
},
resolve: {
//自动解析确定的扩展。默认值为：
extensions: [".js", ".json", ".jsx", ".css"],
//解析目录时要使用的文件名。默认：
mainFiles: ["index","Index"]
}
}
重点： 千万注意不要更改下面三个 loader 的引用顺序，改了就无法正确解析 less 了，我配置文件的时候也是从官网上复制的，没想到帮同学配置的时候，让他手写的结果，编译less 的时候一直出错。换了顺序才弄好。所以配置文件最好不要手写，但是一定能达到手写的标准。
{
test:/\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
]
}
八、实现一个 hello world
- main.js 文件
//不熟练的话文件一个不能改
import "./a.less";
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
hello world!
,
document.getElementById("box")
);
- 最后的效果静态页面 index.html
React 起步
-
浏览器打开 index.html 页面
最后的效果
九、解决兼容问题
因为 babel 对第七个版本进行了很大的升级所以，我们安装的插件有点不对，才会导致与最新的 webpack 有兼容问题，接下来我们来看看最新的安装方法。
npm install --save-dev @babel/core @babel/plugin-proposal-object-rest-spread @babel/preset-env @babel/preset-react babel-loader
与上面的 babel 安装方法比较就发现不同了。唯一需要注意的是babel-loader 安装方法没发生改变。我也不明白其他的 babel 安装方法都变了只有这个没变这个没变。等我们安好了，再修改一下配置文件。
options: {
presets: ['@babel/preset-env','@babel/preset-react'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
修改配置完成在 npm run dev ，大功告成。
我们写的程序都是直接通过 webpack 打包生成本地文件，也就说每次执行这个命令都得进行硬盘的读写，这无疑是很大的伤害，而且我们写的程序肯定还的发出 Ajax 请求，而这必须在服务器上。这时 webpack-dev-server 登场了。
安装：
npm install -g webpack-dev-server
更改配置文件有三处：
// var path = require("path");
// 使用webpack-dev-server 就不需要path
output:{
// webpack要求的输出路径
// path:path.resolve(__dirname,"dist"),
// webpack-dev-server的虚拟输出路径
publicPath:"virtual",
filename:"all.js"
},
// webpack-dev-server 动态实时更新不在需要watch:true;
// watch:true,
改完之后去 index.html 把引包的文件路径变成现在 virtual 的文件路径。
配置完整的 webpack-config.js
//webpack.config.js
// var path = require("path");
// 使用webpack-dev-server 就不需要path
module.exports = {
mode:"development",
entry:"./App/main.js",
output:{
// webpack要求的输出路径
// path:path.resolve(__dirname,"dist"),
// webpack-dev-server的虚拟输出路径
publicPath:"virtual",
filename:"all.js"
},
// webpack-dev-server 动态实时更新不在需要watch:true;
// watch:true,
module:{
rules:[
{
test:/\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
//上面的另一种写法
//use: ['style-loader', 'css-loader','less-loader']
]
},
{
test: /\.m?js$/,//匹配.mjs和.js结束的文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','@babel/preset-react'],
// @babel/plugin-proposal-object-rest-spread翻译高级ES的...
// @babel/plugin-transform-runtime翻译高级ES的带星函数即Generator
plugins: ['@babel/plugin-proposal-object-rest-spread','@babel/plugin-transform-runtime']
}
}
}
]
},
resolve: {
//自动解析确定的扩展。默认值为：
extensions: [".js", ".json", ".jsx", ".css"],
//解析目录时要使用的文件名。默认：
mainFiles: ["index","Index"]
}
}
这时我们在运行，只需要输入 webpack-dev-server 就能看到如下结果：
根据提示可知我们的文件跑在本地服务器的 8080 端口。
浏览器地址栏输入http://127.0.0.1:8080/ 或 http://localhost:8080/ 即可查看到结果。
这时我们会发现本地没有要生成的文件，但程序还是成功运行了，这是因为
webpack-dev-server 没有对硬盘读写，而是把文件放到了内存里面。在浏览器的地址栏可以输入网址：http://localhost:8080/virtual/all.js 即可查看到生成的 js 文件。不仅如此文件是一直挂起的，只要改动视图浏览器自动更新。