实现自动打开浏览器、热更新和配置浏览器的默认端口号 注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！ 方式1： 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：
"dev": "webpack-dev-server --hot --port 4321 --open"
方式2：
修改webpack.config.js文件，新增devServer节点如下：
devServer:{
hot:true,
open:true,
port:4321
}
在头部引入webpack模块：
var webpack = require('webpack');
在plugins节点下新增：
new webpack.HotModuleReplacementPlugin()
使用webpack打包css文件
运行cnpm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}
注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
使用webpack打包less文件
运行cnpm i less-loader less -D
修改webpack.config.js这个配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
使用webpack打包sass文件
1. 运行cnpm i sass-loader node-sass --save-dev
2. 在webpack.config.js中添加处理sass文件的loader模块：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
使用webpack处理css中的路径
1. 运行cnpm i url-loader file-loader --save-dev[/b]2. 在webpack.config.js中添加处理url路径的loader模块：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
1. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
使用babel处理高级JS语法
- 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
- 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
- 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
-
在项目根目录中添加.babelrc文件，并修改这个配置文件如下：
{ "presets":["es2015", "stage-0"], "plugins":["transform-runtime"] }
1. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；
相关文章
babel-preset-env：你需要的唯一Babel插件Runtime transform 运行时编译es6
