*********************************webpack一整套跑下来*************************************
https://www.jianshu.com/p/42e11515c10f 简书关于webpack的详细教程
1：新建文件夹，安装webpack，已经全局安装cli和dev-server
2：继续建文件夹：src dist 以及webpack.config.js src里面放indexhtml css js image文件夹，以及webpackjs
3：webpack.config.js内容：
var path = require('path')
var webpack = require('webpack')
module.exports = {
// bundle入口
entry: ['./src/webpack'],
// bundle输出
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js' //可重命名
}
}
重新打包的时候必须删除bundlejs里面的内容，不然就会有重复的内容
4：直接运行webpack命令，已经可以看到输出了，虽然有警告。
*******************************************************************************************
1:git clone 项目到本地
2：init ，把命令写入json文件
3：安装webpack
cnpm install webpack webpack-dev-server webpack-cli --save-dev
4：安装react依赖
cnpm install react react-dom --save-dev
5：新建文件夹以及index文件
6：新建configjs文件--引入最基本的配置；然后配置devserver入口文件夹--必须有jsxloader才能打包react
7：安装babel解析jsx
cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
然后在config中对loader进行配置；
++++++++++++到这里可以正常打包和打开页面了+++++++++++++++++++++
注意：入口页面的render也需要引入，render里面只能放组件标签，--可是前面为什么会出错呢？
*************************************webpack分步走************************************
1：webpack的初始配置；
cnpm isntall webpack webpack-dev-server webpack-cli --save-dev
然后配置config，写入入口文件；
然后直接配置json，加入启动命令即可；server已经可以正常运行
2：加入loader，和插件；
jsxloader css/lessloader/图片loader/
jsxloader：cnpm insatll --save-dev babel-core babel-loader babel-preset-env babel-preset-react babel-preset-es2015
css/lessloader: cnpm insatll style-loader css-loader --save-dev
图片loader：cnpm insatll --save-dev url-loader html-withimg-loader
插件1：引入模板文件-在config引入和实例化
cnpm install html-webpack-plugin --save-dev
插件2：热更新：直接实例化 webpack.HotModuleReplacementPlugin
3：引入react以及各种模块
cnpm install react react-dom react-router-dom redux react-redux thunk --save-dev
---写入indexhtml和js，以及在config中配置devserver目录，即可打开端口和页面
4：devtool: 'source-map',
mode: "development", 引入这两个设置之后，速度才真正飞起来，打包时间才2s不到
集中命令：webpack+解码器+插件+react+express+axios+socket
cnpm --save-dev isntall webpack webpack-dev-server webpack-cli
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="bundle.js"></script>
</html>
import React from 'react'
import ReactDom from 'react-dom'
import {render} from 'react-dom';
function Test(){
return <h2>test</h2>
}
render(<Test/>, document.getElementById('root'));
entry: __dirname + "/app/index.js",//已多次提及的唯一入口文件 '"
output: {
path: __dirname + "/build",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
}
"start": "webpack",
"server": "webpack-dev-server "