前端对于打包工具webpack的使用

首先是针对于版本的变化3-4

4的话node版本的底版不再支持，尽量下载14.0以后的版本，做到更好的兼容

配置方面增加了mode:production/development/none想要指定在不同的mode下开启默认的优化手段

loader和plugin的不同

1.loader能让webpack处理不同的文件，然后对文件进行一些处理，编译，压缩等，最终一起打包到指定文件中（比如loader可以将sass，less文件写法转换成css，而不需要在使用其他转换工具），loader本身是一个函数，接收源文件作为参数，返回转换的结果

对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，**转换代码越多，效率就越低**。当然了，这是可以优化的。

对于loader就可以进行优化首先的话就是优化loader文件的搜索范围

module.exports = {module: {rules: [{// js 文件才使用 babeltest: /\.js$/,loader: 'babel-loader',// 只在 src 文件夹下查找include: [resolve('src')],// 不会去查找的路径exclude: /node_modules/}]}
}

babel仅仅只用作用在js代