【郑州校区】前端与移动开发之vue-day5（3） - 黑马程序员技术交流社区

注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！

修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

修改webpack.config.js文件，新增devServer节点如下：

[AppleScript] 纯文本查看 复制代码

devServer:{

        hot:true,

        open:true,

        port:4321

    }

[AppleScript] 纯文本查看 复制代码

var webpack = require('webpack');

[AppleScript] 纯文本查看 复制代码

new webpack.HotModuleReplacementPlugin()

运行cnpm i style-loader css-loader --save-dev

修改webpack.config.js这个配置文件：

[AppleScript] 纯文本查看 复制代码

module: { // 用来配置第三方loader模块的

        rules: [ // 文件的匹配规则

            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则

        ]

    }

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

运行cnpm i less-loader less -D

修改webpack.config.js这个配置文件：

[AppleScript] 纯文本查看 复制代码

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

[AppleScript] 纯文本查看 复制代码

1. 运行cnpm i sass-loader node-sass --save-dev

2. 在webpack.config.js中添加处理sass文件的loader模块：

[AppleScript] 纯文本查看 复制代码

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

[AppleScript] 纯文本查看 复制代码

1. 运行cnpm i url-loader file-loader --save-dev2. 在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"]

    }



1. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；