正则匹配字符串无匹配不到_webpack使用和正则匹配

在ES6中，引入了更方便的模块化引入方法，在框架中大家应该都用到过如import,export,这两个东西就是ES6用来实现模块化的两个关键词。

在以前我们想要使用模块化怎么办，使用script标签src引入或者各种插件来实现，而ES6模块化的目的也是为了让大家都统一，不再像以前一样，各种各样的方法，或者直接写一个页面的。

虽然ES6提供了 import 和 export 但是对于浏览器而言，是不能直接识别的:

这样直接使用浏览器是不认的，虽然ES6已经把import 和 export列入标准，那浏览器不认，所以我们就只能使用webpack来让浏览器认了，首先如何安装webpack:

我们可以使用 npm cnpm yarn 来安装它，但由于版本更新可能会遇到些问题，不要慌：

npm i webpack -g

这样就开始安装了成功，看看我们的webpack是否有了，他会提示安装webpack/cli，按他提示的做就可以了

npm i webpack/cli -g

如果npm 安装很慢 更换一下taobao源就可以了

npm config set registry http://registry.npm.taobao.org

下载好后我们还需要做一下配置：

在项目根目录下创建一个webpack.config.js的文件，他是一个node的模块，所以需要使用：

module.export 来导出配置文件，以供执行

const path = require('path')  //这个是node提供的方法，专门处理路径问题的，node中只能使用绝对路径，这样可以是我们的代码更灵活

module.exports = {  
 entry: './mod1.js',   //导入，需要编译的文件
 output: {     //导出，必须是一个对象
 path: path.resolve(__dirname, 'dist'),     //_dirname相当于绝对路径下项目的根目录/创建一个dist文件夹
 filename: 'bundle.js'    // 编译后的文件名
    }
};

这样，我们在该目录下使用webpack命令时就会创建一个dist的目录，里面有一个bundle.js的文件，里面存放的是mod1编译后的代码，此时的import，export在webpack的作用下就可以连在一起了。

但是，要记着因为webpack是在node环境下使用的，所以引用路径都要按照node的标准来使用，例如：

这里的引用就是有问题的，webpack是不认识的，必须使用：

这样才能被通过，当然我们主html的js引入路径也要改变，不是引入mod1.js了而是引入这个bundle.js的文件.这样我们再打开浏览器就可以被输出了

---

下面来说一下正则匹配的问题，首先要知道他就是一个工具，用来处理字符串的，别的没用。

在js中使用正则有两种方法，

一种是js提供的，new一个正则对象：

let regex = new RegExp("ab+c");

另一种直接生命一个正则表达式：

let reg = /ab+c/

两种方法都是可以的，但明显第二种更加方便。

首先 / / 是表示他是一个正则表达式，

例如一串字符串

let str = 'abfghaiogjasojg gaga  gjasgjas'

我们需要找出里面a，

let reg = /a/  这样是只能拿到一个a ， 所以我们需要一的配置参数 g 全局的意思   let reg = /a/g
str.match(reg) 

将所有匹配到的数，返回出来，是一个数组。

/中间填写你想要匹配的字符/

当然这里我们需要记一下，一些转义字符

d  0-9的数
w  0-9或a-z或_
.   所有字符
[]  元字符  [0-9] === d  [a-z|0-9|_] === w [^0]不包括0
D  不含0-9的数
W  不含0-9或a-z或_
{n，m}   n最少数 m最大数
? {0，1}
+ {1，}
i 忽略大小写
g 全局检索

基础符号大致就是这样，^符号注意下，在元字符里面表示不包括什么，但是在外面就表示行首，$表示行尾。

来匹配一下歌词的前面的时间吧：

let str = '[02:45.99]'
let reg = /^[dd:dd.dd]/

reg.test(str)
true

当然这里还是不严谨的，因为分秒最多60，不过在简单的使用中是没有问题的当然如果全局检索记得加上g的参数哟。

let reg = /^[dd:dd.dd]/g

正则是非常好用的，在工作中我们复制粘贴就够了，但自己最好要了解下基础哟。