实现自动打开浏览器、热更新和配置浏览器的默认端口号

"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-dev2. 在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语法

1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

1. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

   {    "presets":["es2015", "stage-0"],    "plugins":["transform-runtime"]}

2. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；
   相关文章
   babel-preset-env：你需要的唯一Babel插件Runtime transform 运行时编译es6