写在前面:首先感谢zhangwang，入门 Webpack，看这篇就够了让我对现在的前端开发有了个入门级认识，也很惭愧我以为装个node、npm、webpack就可以开始前端开发了，看了入门 Webpack，看这篇就够了 才发现前端东西挺多的，要学的也挺多的，这篇文章是用webpack4把zhangwang的文章里的程序重新跑了下，重复的东西不会细说，会大致介绍下loader或者plugin的功能，然后介绍下原文在新版webpack跑不起来的地方，最后上一个可直接运行的源码，也是给自己做个备份，以后有机会做react项目的时候能快速把环境搭起来，这篇文章结束一定要去研究vue了。
强调一下。这篇文章里的源码能跑起来的基础是node、npm、webpack、webpack-cli、webpack-dev-server都装了，不知道这么装的可以参考node.js安装及npm设置及sublime安装及npm安装webpack系列软件。还有就是发现了一个npm本地安装包的好处是可以整个项目打包直接分享出去。要是都全局安装，分享项目要搞死人，博客一部分是分享，一部分是记录，有时候我会记录一些让我感觉不一样的东西，如果恰巧你看到了这些，并且你并不care，耽误了你的时间，我表示非常的抱歉。
项目文件浅谈：（node+npm+webpack这一系列开发应该都大同小异吧？先在给自己埋个坑，学习完vue再比较下）
项目配置文件：package.json 项目管理及依赖管理文件，懂后端的可以理解成pom文件（npm+webpack理解成maven）
webpack.{env}.config.js 打包配置文件可以在package.json中指定，一般情况下开发生产各一个。
.babelrc babel js解析配置文件，这个系统会自动去找（node自动扫描到？待确认）。
postcss.config.js css预处理配置文件，看官网也没写在哪里有配置指向这个文件，估计是node可以自动扫描到吧（待确认）。
package-lock.json：npm安装包的时候自动生成依赖，不用配置。
包说明：
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
babel-core核心功能包;babel-preset-env ES6解析包;babel-preset-react JSX文件解析包npm install --save react react-dom
react,react-dom开发依赖包
npm install --save-dev style-loader css-loader
style-loader css-loader css处理加载器
npm install --save-dev postcss-loader autoprefixer
postcss-loader css预处理加载器;autoprefixer自动处理插件
npm install --save-dev html-webpack-plugin
自动生成一个自动引用你打包后的JS文件的新index.html
npm install --save-dev babel-plugin-react-transform react-transform-hmr
允许你在修改组件代码后,自动刷新实时预览修改后的效果,针对react模块
npm install --save-dev extract-text-webpack-plugin
分离CSS和JS文件,不支持webpack4以后的版本
npm install --save-dev extract-text-webpack-plugin@next
分离CSS和JS文件,支持webpack4以后的版本
UglifyJsPlugin压缩js代码,webpack4不需要。配置mode:'production'就可以了
npm install clean-webpack-plugin --save-dev
打包前清理以前的打包文件
再次强调上面只是记录包的作用，不是引导读者下载。下面的共享资源里面已经有上面列出的包了只要解压就能跑起来。
差异：
1.extract-text-webpack-plugin不支持webpack4,需要安装extract-text-webpack-plugin@next,打包配置也有差异，可下载资源自行看配置文件
2.webpack4自带js压缩，不需要再安装引用js压缩文件。如果不需要压缩，在打包文件中把mode配置成development即可，如果要压缩，把mode配成production即可。可以在命令行输入 webpack --help查看mode支持哪些选项
资源下载：webpack+react Demo 分享码：mtao