什么是loader

loader是webpack中一个非常核心的概念。

webpack用来做什么呢？

在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。

但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括 一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

对于webpack本身的能力来说，对于这些转化是不支持的。

我们需要给webpack扩展对应的loader就可以了。

loader使用过程：

步骤一：通过npm安装需要使用的loader

步骤二：在webpack.config.js中的modules关键字下进行配置

大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法

1.webpack中使用css文件的配置

先建好目录

在这里插入图片描述

在main.js文件中添加依赖

main.js

//1.使用commonjs的模块化规范
const {add,mel} = require('./js/mathList.js')
console.log(add(10,20));
console.log(mel(10,20));
//2.使用ES6的模块化规范
import { name,age,height } from './js/info';
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css")                   //添加依赖

安装loader

webpack官网：https://webpack.docschina.org/loaders/style-loader/

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

webpack@3.6.0对应：

npm install --save-dev style-loader@0.23.1
npm install --save-dev css-loader@2.0.2

对webpack.config.js进行配置

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左
            use: ["style-loader","css-loader"],
          },
        ],
      },
}

webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。

最后启动打包即可：

npm run build

2.webpack中使用less文件的配置

新建一个less文件

@fontSize: 50px;
@fontColor:orange;
body{
    font-size: @fontSize;
    color: @fontColor;
}

在入口文件进行引入（main.js）:

//1.使用commonjs的模块化规范
const {add,mel} = require('./js/mathList.js')
console.log(add(10,20));
console.log(mel(10,20));
//2.使用ES6的模块化规范
import { name,age,height } from './js/info';
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css")
//4.依赖less文件
require("./css/index.less")

document.writeln('<h2>你好啊，webpack</h2>')

对应webpack@3.6.0版本

 npm install less@3.9.0 less-loader@4.1.0

最新版本：

 npm install less less-loader

配置package.json

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左
            use: ["style-loader","css-loader"],
          },
          {
            test: /\.less$/i,
            loader: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
        ],
      },
}

最后启动打包即可：

npm run build

3.webpack中图片文件的处理

webpack@3.6.0 对应如下操作：

（最新版本观看官网，使用原理大同小异 ： https://webpack.docschina.org/loaders/file-loader/）

如果图片大小小于自己设定的limit值时：webpack会将图片编译成base64字符串

如果图片大小大于limit时：就需要安装file-loader模块进行加载 （在最新版中不论大小，只需要file-loader即可）

在这里插入图片描述

安装url-loader

npm install --save-dev url-loader@1.1.2

安装file-loader

npm install file-loader@3.0.1 --save-dev

webpack.config.js

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:'dist/'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左
            use: ["style-loader","css-loader"],
          },
          {
            test: /\.less$/i,
            loader: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
          {
            test: /\.(png|jpg|gif)$/,
            use:[
              {
                loader:'url-loader',
                options:{
                  //当加载的图片，小于limit时，会将图片编译成base64字符串形式
                  //当加载的图片，大于limit时，需要使用file-loader模块进行加载
                  limit:15000,
                  name: 'img/[name].[hash:8].[ext]',
                }
              }
            ]
          },
        ],
      },
}

图片文件处理修改文件名称：

默认情况下webpack会自动帮助我们生成一个32位hash值，防止名字重复。

但是，真是开发中，我们可能对打包的图片名字有一定的要求。

所有我们可以在options中添加如下选项：

1.img：文件要打包到的文件夹

2.name：获取图片原来的名字，放在该位置

3.hash:8：为了防止图片名称冲突，使用hash，但是只保留8位。

4.ext：使用图片原来的扩展名

name: 'img/[name].[hash:8].[ext]',

本代码案例的效果：

在这里插入图片描述

还有一个问题，在默认情况下，webpack会将生成的路径直接返回给使用者。但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要给路径 下添加一个dist/

在这里插入图片描述

4.webpack中ES6转ES5的babel

webpack@3.6.0 对应如下操作：

（最新版本观看官网，使用原理大同小异 ： https://webpack.docschina.org/loaders/file-loader/）

安装babel-loader、babel-core、babel-preset-es2015

npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3  babel-preset-es2015@6.24.1

webpack.config.js

{
     test: /\.js$/,
     //exclude 排除
     //include 包含
     exclude: /(node_modules|bower_components)/,
       use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
       }
}

然后重新打包即可

npm run build

5.webpack中使用Vue的配置

webpack@3.6.0 对应的如下操作：

我们希望在项目中使用Vue.js,那么必然需要对其有依赖，所有需要先进行安装

注：因为我们后续是在实际项目中也会使用vue的，所有并不是开发时依赖

npm install vue@2.5.21 --save

Vue中 runtime-compiler 和 runtime-only 两种模式

1.runtime-only -> 代码中，不可以有任何的template

2.runtime-compiler -> 代码中，可以有template，因为compiler可以用于编译template

webpacke.config.js配置

resolve:{
      alias:{
        //alias 别名
        'vue$':'vue/dist/vue.esm.js'       //配置runtime-compiler模式
      }
    }

在这里插入图片描述

main.js入口文件

//5.使用vue进行开发
import Vue from 'vue'
const app = new Vue({
    el:'#app',
    data:{
        message:'hello webpack'
    }
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{message}}</div>
    </div>
</body>
<script src="./dist/bundle.js"></script>

</html>

6. .vue文件封装处理

webpack@3.6.0 对应的如下操作：

安装vue-loader和vue-template-compiler

npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev

配置webpack.config.js文件

{
  test: /\.vue$/,
  loader: ['vue-loader'],
}

封装App.vue

<template>
  <div>
    <div class="active">
      {{ message }}
    </div>
    <button @click="btnClick">按钮</button>
    <Cpn />
  </div>
</template>
<script>
import Cpn from "./Cpn";
export default {
  name: "App",
  data() {
    return {
      message: "hello webpack vue",
    };
  },
  methods: {
    btnClick() {
      console.log("vue");
    },
  },
  components: {
    Cpn,
  },
};
</script>
<style scoped>
.active {
  color: green;
}
</style>

main.js

import Vue from 'vue'
import App from "./vue/App.vue"
new Vue({
    el:'#app',                   //对index.html中的#app进行绑定
    template:'<App />',			 //模板App替换#app
    components:{
        App
    }
})

解决拓展名简写问题

对webpack.config.js进行配置

resolve:{
      extensions:['.js','.css','.vue'],            //解决引入文件简写问题。添加这一行就可以简写
      alias:{
        //alias 别名
        'vue$':'vue/dist/vue.esm.js'              //配置runtime-compiler模式
      }
    }

在这里插入图片描述

# webpack
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue