优化css
我们把文件打包后，可以看一下js、css 的处理，js 已被优化，css是未作处理的，请记住这一点。同样的步骤，安装插件，修改配置文件
npm install --save-dev optimize-css-assets-webpack-plugin
以后安装后都是引用的，就按照这个步骤来，以后就不提示了呀。
然后我们打包再次查看就会发现，css已经被处理了，可是js文件怎么变了，这是因为webpack 默认已经对js 做了优化，如果你修改的话，一定要这样再配置一下js的优化项。
安装
npm install --save-dev uglifyjs-webpack-plugin
修改配置文件
再次打包，好了完好如初了。
babel
现在我们开发中已经大量使用es6或者es7语法了，而对于不支持的浏览器，我们先转换为es5语法，babel就可以做这种事情，我们修改src下的index.js 文件,再把mode切换为开发环境
require('./css/index.css');
require('./css/index.scss');
let sayHello=(value)=>{
alert(`你好 ${value}`)
}
sayHello('qzy');
然后打包，我们查看打包后的main.js 文件，我们发现没有转换。
好了，安装
npm install babel-loader @babel/core @babel/preset-env --save-dev
@babel/core @代表官方 babel/core 核心模块 babel/preset-env es6 转换为es5， 注意 Babel 默认只转换新的 JavaScript 句法，而不转换新的 API，如果你想转化api如promise 需要引入 babel-polyfill。
修改配置文件如下 （loader）
再次打包，查看打包后的js 文件
已经转化为es5语法了。