主题 - css加载器 & 自动打包+浏览器自动刷新 & 优雅降级
css加载器
在webpack模块化开发中默认只支持js文件，其它的文件，比如css,leass,sass.....都需要用到加载器(loader)
配置loader：
对css进行转换
npm install style-loader css-loader -D
在package.json查看是否已经安装成功，成功安装如下：
在index.js文件下用以下语句引入：（从右到左读，但是要从左到右写）
require('style-loader!css-loader!./assets/css/a.css');
执行 webpack -p 打包后会将css样式渲染
拓展：初级手动配置webpack
1.新建webpack.config.js文件并加入以下配置:
let path = require('path');
module.exports = {
entry: './src/index.js', //入口文件
output: { //默认输出到dist
path: path.resolve(__dirname, 'dist'), //指定编译目录 不写默认指定到dist
filename: 'js/main.js', //出口文件路径
},
module: {
rules: [
//以.css结尾的文件 css加载器 - use内排名分先后
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
],
},
//配置环境
mode: 'development' // | production
}
在module的rules中已经添加了css加载器，所以index.js中的代码可以转变如下，直接引用就可以了。
由于webpack.config.js中设置了mode，所以只需要webpack就可以打包了。
注意事项: webpack.config.js配置的时候，正则不需要加引号。
如果多个出入口配置如下：
webpack -w 自动监听开发环境下的文件的更改并打包到dist目录文件下去 --- 自动打包
浏览器自动刷新 - webServer 搭建前端开发服务器
安装:cnpm install webpack-dev-server -g(全局安装)
（将开发的项目全部打包到计算机内存中，内存中会生成一个类似于dist目录的结构，然后浏览器检测到变化后会自动刷新）：出现以下就安装成功啦！
在webpack.config.js中配置一下虚拟目录如下：
在终端输入:webpack-dev-server后会出现以下：
在浏览器中输入http://localhost:8081就可以了，更改css文件中的样式可以最直观的看到效果,同时终端中会出现以下信息显示成功
自动打开浏览器并更新：
1-1
webpack-dev-server --port 8001 --open
如果不想手动写这么长的命令，那么在package.json文件中配置一下就可以使用npm start来替代以上的命令啦！
1-2:
输入命令：webpack-dev-server
优雅降级(es6->es5):babel
安装babel的核心：
npm install babel-loader babel-core babel-preset-env -D
package.json文件中会自动生成以下:
由于babel目前8.0.2版本不稳定，安装的时候出现警告没有安装依赖，需要倒退去安装稳定版本来解决这个问题:
npm install babel-loader@7.1.5 babel-core babel-preset-env -D
在webpack.config.js文件中添加以下配置：
let 打包后变成了var ：）！！！可以放心大胆的写激进语法啦！
