VUE-CLI学习第二天

loaders基础

安装loaders

• 由于css等文件在打包时webpack不具备相应的能力，所以需要安装loaders来进行打包
• www.webpackjs.com查看文档来查阅相应文件所需的loaders
• 示例(css-loader)（解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码）

  • @~ npm install --save-dev css-loader
    

• 示例(style-loader)（将模块的导出作为样式添加到 DOM 中）

  • @~ npm install style-loader --save-dev
    

配置webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                //css-loader只负责将css文件进行加载
                //style-loader负责将样式添加进DOM中
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ] //使用多个loader时，从右向左
            }
        ]
    }
}

引入css等文件

• 在入口文件里引入

  • require('./css/normal.css')
    

打包图片

• 安装url-loader
• 配置webpack.config.js
  • 使用url-loader

    {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 60000  //限制的图片大小，打包图片大小需小于这个值
                }
            }
        ]
    }
    

  • 当图片大小小于limit时， 会将图片编译成base64字符串形式
  • 当图片大小大于limit时，需要使用file-loader模块进行加载
  • 使用file-loader（生成图片文件在dist文件夹里）

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

    • 此时会出现找不到文件路径
    • 需配置webpack.config.js

          output:{ 
              publicPath: '../dist/' //html文件相对dist文件夹的位置
          },
      

    • 图片命名(在url-loader配置里添加)

      options: {
                  name:'img/[name].[hash:8].[ext]'
              }
      

ES6转ES5

安装babel-loader

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

配置webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}