webpack解析 .babelrc

一、解析ES6
1、安装babel：@babel/core @babel/preset-env babel-loader；
2、安装完后在webpack.config.js中引用：

module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'
      }
    ]
  },

3、在文件.babelrc增加ES6的Babel preset配置：

{
	"presets": [
			"@babel/preset-env"
	]
}

二、解析CSS，Less
css-loader用于加载.css文件，并且转换成commonjs对象
style-loader将样式通过style标签插入到head中
1、安装style-loader css-loader less less-loader
2、安装完后引用

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

这里要注意：loader是链式调用，执行顺序是从右到左调用的，所以要先写style-loader再写css-loader，这样就是先解析css-loader再传递给style-loader

三、资源解析：解析图片
file-loader用于处理文件：
1、安装npm i less file-loader -D
2、引用：

{
   test: /\.(png|svg|jpg|gif)$/,
   use: [
     'file-loader'
   ]
}

url-loader：内容也是用了file-loader来解析的

{
  test: /\.(png|svg|jpg|gif|jpeg)$/,
  use: [{
      loader: 'url-loader',
      options: {
        limit: 10240 // 单位：字节，10KB，小于10KB将自动转化base64
      }
    }]
},