前端与移动开发之vue-day5（3）

实现自动打开浏览器、热更新和配置浏览器的默认端口号
注意：热更新在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语法

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

转载于:https://blog.51cto.com/13517854/2319207