*********************************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-dev4：安装react依赖 cnpm install react react-dom --save-dev5：新建文件夹以及index文件6：新建configjs文件--引入最基本的配置；然后配置devserver入口文件夹--必须有jsxloader才能打包react7：安装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-es2015css/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.HotModuleReplacementPlugin3：引入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'));
module.exports = { 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 "