本文借鉴与https://www.jianshu.com/p/6712e4e4b8fe，感谢分享
1、项目搭建
新建文件夹webpack4Demo
2、初始化package.json
进入文件夹 执行 npm init 初始化一个工程，里面会有一个初始化的package.json
3、安装webpack 和webpack-cli
cnpm install webpack webpack-cli -g
4、此时可以直接使用webpack指令打包了,webpack4.x 默认打包输入路径是'./src/index.js' 输出为'./dist/mian.js'.但是你会发现出现黄色的警告信息
5、mode是4.x版本独有的特性，有生产模式和开发模式俩种，production和devlopment
webpack --mode=development 或者 webpack --mode=production
生产模式下打得包体积更小，并且会生成一个node_modules的文件夹
6、自己动手webpack的配置
修改package.json中的内容
执行 npm run build
7、多入口的配置
8、devServer配置
浏览器可以正常运行
9、CSS文件打包配置
在src中新建一个index.css文件，在main.js中导入
执行 npm run server
发现 这个时候不能解析，我们需要下载css-loader和style-loader
npm install style-loader css-loader --save-dev 这个时候一定要安装到项目中来，不能再安装全局的否则无用
webpack配置css打包项 【写到会为止】
我的浏览器也生效了！
10、JS压缩，上线需要对js文件进行压缩减少带宽
这里使用uglifyjs-webpack-plugin(JS压缩插件，简称uglify)
webpack中已经集成了这个插件，所以不用下载了，这里注意前面下在那个 webpack和webpack-cli的时候一定要下到本项目中，否则会报错
这个是main.js未压缩时
对他进行压缩
main.js已经变成这个样子了
在生产模式下默认就是压缩的
11、打包HTML文件
需要先安装 npm install html-webpack-plugin --save-dev
然后配置打包插件
最后生成的模板HTML为
12、处理CSS中的图片信息
我们在css中给bady加上背景图片，然后编译的时候报错
我们需要俩个解析照片和url的loader
npm install file-loader url-loader --save-dev
file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
构建成功！
13、将CSS在JS中分离出来
这里需要安装插件
npm install extract-text-webpack-plugin webpack3.0用这个插件去实现CSS分离,
webpack4.0使用 mini-css-extract-plugin 实现CSS分离
npm install mini-css-extract-plugin --save-dev
改完css分离，记住还要将图片输出路径修改下，否则出现出现路径加载错误
14、如何加载HTML中写的img标签呢?
html中直接定义img标签，npm run build 之后，打开浏览器
发现图片路径错误
解决错误：
npm install html-withimg-loader --save-dev
这样就可以成功了，还要注意一点就是JS中引用照片和react当中引用照片，打包若是丢失照片，需要使用模块化的去写
15、.babelrc配置
因为现在很多浏览器还不支持es6的语法所以很多代码中es6语法需要转义为es5的写法，这里就需要babelrc了
npm install babel-loader --save-dev 但是babel-loader需要babel-core,所以还要下载
npm install babel-core --save-dev
虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果写在webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置写在.babelrc文件里。
官方推荐使用的是babel-preset-env 所以去下载 npm install babel-preset-env --save-dev
还有 sass和less的配置后面项目中用到在具体的配置
最后附上我的package.json