Vuejs11--webpack loader-css、style、url、file和语法处理（babel）

什么是loader ,webpack的用来作什么

webpack会自动处理js相关的依赖。但是在开发中还需要加载css、图片也包括一些高级ES6转化成ES5的代码，将scss、less转成css,将jsx、.vue转成js文件等，对于webpack本身的能力来说。对于这些是不支持的。但是webpack来扩展对应的loader即可
导入
require(“路径”)

require("./css/first.css")

报错：You may need an appropriate loader to handle this file type.
注：详情请看官方文档
1、安装loader
1.1 安装css-loader
1.2 安装style-loader
css-loader:只负责将css文件进行加载
style-loader:负责将样式添加到DOM中

npm install --save-dev css-loader
npm install style-loader --save-dev

1.3 安装url-loader
background-image: url(’…/img/1.jpg’);
缺少 url-loader

npm install --save-dev url-loader
npm install --save-dev file-loader

2、配置loader
2.1 css-loader
2.2 style-loader
在webpack.config.js中

module.exports={
    module: {
        rules: [
          {
            test: /\.css$/,
            // 当使用多个loader时，是右向左加载--注意加载顺序
            use: [ 'style-loader', 'css-loader' ]
          }
        ]
      }
}

2.3 配置 url-loader

	module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 44000
            }
          }
        ]
      }
    ]
  }

limit:当图片字节小于limit的限制，图片会被转入base64字符串去显示 。

大于limint限制报错
报错：ERROR in ./src/img/1.jpg Module build failed: Error: Cannot find module 'file-loader’
大于限制的图片会转为file的加载，默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值，进而需要安装file-loader,安装file-loader(无需配置)**

npm install --save-dev file-loader

若url路径在打包后在dist中生了一个图片文件，这将导致导致图片路径不正确；
解决办法:
这样会在url前拼接这个路径在找到正确的图片文件路径

module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:'../dist/',
    }
    }

问题：当所有图片文件全都打包的dist下，文件管理混乱而且其图片名字都是32位hash值，这样无法判读图片原名称
解决：

name:‘img/[name].[hash:8].[ext]’
dist/img下原图片名称加8位hash值加扩展名

{
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 43000,
                  name:'img/[name].[hash:8].[ext]'
                }
              }
            ]
          }

去查看webpack打包后的js文件。发现其中存在ES6语法并没有转成ES5语法而部分浏览器目前不支持ES6。此时需要转ES5。

babel-loader

安装

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘es2015’]
}
}
}