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

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

方式1：

• 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：
• "dev": "webpack-dev-server --hot --port 4321 --open"
• 方式2：
  • 修改webpack.config.js文件，新增devServer节点如下：
  • [AppleScript] 纯文本查看 复制代码

    devServer:{
            hot:true,
            open:true,
            port:4321
        }

  • 在头部引入webpack模块：
  • [AppleScript] 纯文本查看 复制代码

    var webpack = require('webpack');

  • 在plugins节点下新增：
  • [AppleScript] 纯文本查看 复制代码

    new webpack.HotModuleReplacementPlugin()

  • 使用webpack打包css文件
    • 运行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模块的调用顺序是从后向前调用的；
        
        
      使用webpack打包less文件
    • 运行cnpm i less-loader less -D
    • 修改webpack.config.js这个配置文件：
    • [AppleScript] 纯文本查看 复制代码

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

    • 使用webpack打包sass文件
    • [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'] }

    • 使用webpack处理css中的路径
      [AppleScript] 纯文本查看 复制代码

      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"]
          }
      
      1. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；
      

    • 相关文章
      babel-preset-env：你需要的唯一Babel插件Runtime transform 运行时编译es6
      
      
    
    
  
  

重庆的小伙伴福音来啦
前端与移动开发学科强势入驻传智播客·黑马程序员重庆中心           

     大前端时代，助你成为IT行业紧缺人才！
     开班时间：2019年8月13日
     首期班特惠：基础班免费，首期就业班减免1000元 ！！  ！