Vuejs另辟蹊径3(组件化Plus+模块化开发)

其他 2021-03-30 19:43:34 阅读次数: 0

11-组件通信-父子组件通信案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change"/>
</div>

<template id="cpn">
  <div>
    <h2>props:{
   
   {number1}}</h2>
    <h2>data:{
   
   {dnumber1}}</h2>
    <!--<input type="text" v-model="dnumber1">-->
    <input type="text" :value="dnumber1" @input="num1Input">
    <h2>props:{
   
   {number2}}</h2>
    <h2>data:{
   
   {dnumber2}}</h2>
    <!--<input type="text" v-model="dnumber2">-->
    <input type="text" :value="dnumber2" @input="num2Input">
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      num1: 1,
      num2: 0
    },
    methods: {
     
     
      num1change(value) {
     
     
        this.num1 = parseFloat(value)
      },
      num2change(value) {
     
     
        this.num2 = parseFloat(value)
      }
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        props: {
     
     
          number1: Number,
          number2: Number
        },
        data() {
     
     
          return {
     
     
            dnumber1: this.number1,
            dnumber2: this.number2
          }
        },
        methods: {
     
     
          num1Input(event) {
     
     
            // 1.将input中的value赋值到dnumber中
            this.dnumber1 = event.target.value;

            // 2.为了让父组件可以修改值, 发出一个事件
            this.$emit('num1change', this.dnumber1)

            // 3.同时修饰dnumber2的值
            this.dnumber2 = this.dnumber1 * 100;
            this.$emit('num2change', this.dnumber2);
          },
          num2Input(event) {
     
     
            this.dnumber2 = event.target.value;
            this.$emit('num2change', this.dnumber2)

            // 同时修饰dnumber2的值
            this.dnumber1 = this.dnumber2 / 100;
            this.$emit('num1change', this.dnumber1);
          }
        }
      }
    }
  })
</script>

</body>
</html>

12-组件通信-父子组件通信案例(watch实现)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change"/>
</div>

<template id="cpn">
  <div>
    <h2>props:{
   
   {number1}}</h2>
    <h2>data:{
   
   {dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>props:{
   
   {number2}}</h2>
    <h2>data:{
   
   {dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      num1: 1,
      num2: 0
    },
    methods: {
     
     
      num1change(value) {
     
     
        this.num1 = parseFloat(value)
      },
      num2change(value) {
     
     
        this.num2 = parseFloat(value)
      }
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        props: {
     
     
          number1: Number,
          number2: Number,
          name: ''
        },
        data() {
     
     
          return {
     
     
            dnumber1: this.number1,
            dnumber2: this.number2
          }
        },
        watch: {
     
     
          dnumber1(newValue) {
     
     
            this.dnumber2 = newValue * 100;
            this.$emit('num1change', newValue);
          },
          dnumber2(newValue) {
     
     
            this.number1 = newValue / 100;
            this.$emit('num2change', newValue);
          }
        }
      }
    }
  })
</script>

</body>
</html>

13-组件访问-父访问子-children-refs

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
  <cpn></cpn>

  <my-cpn></my-cpn>
  <y-cpn></y-cpn>

  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      message: '你好啊'
    },
    methods: {
     
     
      btnClick() {
     
     
        // 1.$children
        // console.log(this.$children);
        // for (let c of this.$children) {
     
     
        //   console.log(c.name);
        //   c.showMessage();
        // }
        // console.log(this.$children[3].name);

        // 2.$refs => 对象类型, 默认是一个空的对象 ref='bbb'
        console.log(this.$refs.aaa.name);
      }
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        data() {
     
     
          return {
     
     
            name: '我是子组件的name'
          }
        },
        methods: {
     
     
          showMessage() {
     
     
            console.log('showMessage');
          }
        }
      },
    }
  })
</script>

</body>
</html>

14-组件访问-子访问父-parent-root

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是cpn组件</h2>
    <ccpn></ccpn>
  </div>
</template>

<template id="ccpn">
  <div>
    <h2>我是子组件</h2>
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      message: '你好啊'
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        data() {
     
     
          return {
     
     
            name: '我是cpn组件的name'
          }
        },
        components: {
     
     
          ccpn: {
     
     
            template: '#ccpn',
            methods: {
     
     
              btnClick() {
     
     
                // 1.访问父组件$parent
                // console.log(this.$parent);
                // console.log(this.$parent.name);

                // 2.访问根组件$root
                console.log(this.$root);
                console.log(this.$root.message);
              }
            }
          }
        }
      }
    }
  })
</script>

</body>
</html>

11-组件化高级

01-slot-插槽的基本使用

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--
1.插槽的基本使用 <slot></slot>
2.插槽的默认值 <slot>button</slot>
3.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
-->

<div id="app">
  <cpn></cpn>

  <cpn><span>哈哈哈</span></cpn>
  <cpn><i>呵呵呵</i></cpn>
  <cpn>
    <i>呵呵呵</i>
    <div>我是div元素</div>
    <p>我是p元素</p>
  </cpn>

  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件, 哈哈哈</p>
    <slot><button>按钮</button></slot>
    <!--<button>按钮</button>-->
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      message: '你好啊'
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn'
      }
    }
  })
</script>

</body>
</html>

02-slot-具名插槽的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button slot="left">返回</button></cpn>
</div>


<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      message: '你好啊'
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn'
      }
    }
  })
</script>

</body>
</html>

03-什么是编译的作用域

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn v-show="isShow"></cpn>
  <cpn v-for="item in names"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容, 哈哈哈</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      message: '你好啊',
      isShow: true
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        data() {
     
     
          return {
     
     
            isShow: false
          }
        }
      },
    }
  })
</script>

</body>
</html>

04-作用于插槽的案例

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data"> - {
    
    {item}}</span>-->
      <span>{
   
   {slot.data.join(' - ')}}</span>
    </template>
  </cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data">{
    
    {item}} * </span>-->
      <span>{
   
   {slot.data.join(' * ')}}</span>
    </template>
  </cpn>
  <!--<cpn></cpn>-->
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{
   
   {item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
     
    el: '#app',
    data: {
     
     
      message: '你好啊'
    },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn',
        data() {
     
     
          return {
     
     
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }
      }
    }
  })
</script>


</body>
</html>

05插槽（新用法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{
   
   {message}}</p>

    <cpn></cpn>
    <cpn>
        <template v-slot:first="slot">
            <span v-for="item in slot.data">{
   
   {item}}--</span>
        </template>
    </cpn>
    <cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<template id="cpn">
    <div>
        <slot name="first" :data="languages">
            <ul>
                <li v-for="item in languages">{
   
   {item}}</li>
            </ul>
        </slot>
    </div>
</template>
<script>
    new Vue({
     
     
        el: '#app',
        data: {
     
     
            message: 'hello，Vuejs'
        },
        components: {
     
     
            cpn: {
     
     
                template: "#cpn",
                data(){
     
     
                    return {
     
     
                        languages: ["志乃", "雏田", "犬冢牙"]
                    }
                }
            }
        }
    })
</script>
</body>
</html>

模块化开发

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CommonJS(了解)

在这里插入图片描述

扫描二维码关注公众号，回复： 13041463 查看本文章

export基本使用

在这里插入图片描述

导出函数或类

在这里插入图片描述

export default

在这里插入图片描述

aaa.js

var name = '小明'
var age = 18
var flag = true

function sum(num1, num2) {
    
    
  return num1 + num2
}

if (flag) {
    
    
  console.log(sum(20, 30));
}

// 1.导出方式一:
export {
    
    
  flag, sum
}

// 2.导出方式二:
export var num1 = 1000;
export var height = 1.88


// 3.导出函数/类
export function mul(num1, num2) {
    
    
  return num1 * num2
}

export class Person {
    
    
  run() {
    
    
    console.log('在奔跑');
  }
}

// 5.export default
// const address = '北京市'
// export {
    
    
//   address
// }
// export const address = '北京市'
// const address = '北京市'
//
// export default address

export default function (argument) {
    
    
  console.log(argument);
}

bbb.js

import {
    
    sum} from './aaa.js'

var name = '小红'
var flag = false

console.log(sum(100, 200));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>

import使用

在这里插入图片描述

mmm.js

// 1.导入的{}中定义的变量
import {
    
    flag, sum} from "./aaa.js";

if (flag) {
    
    
  console.log('小明是天才, 哈哈哈');
  console.log(sum(20, 30));
}

// 2.直接导入export定义的变量
import {
    
    num1, height} from "./aaa.js";

console.log(num1);
console.log(height);

// 3.导入 export的function/class
import {
    
    mul, Person} from "./aaa.js";

console.log(mul(30, 50));

const p = new Person();
p.run()

// 4.导入 export default中的内容
import addr from "./aaa.js";

addr('你好啊');

// 5.统一全部导入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";

import * as aaa from './aaa.js'

console.log(aaa.flag);
console.log(aaa.height);

Webpack详解

在这里插入图片描述

内容概述

在这里插入图片描述

什么是Webpack

在这里插入图片描述

前端模块化

在这里插入图片描述

和grunt/gulp的对比

在这里插入图片描述

webpack安装

在这里插入图片描述

在这里插入图片描述

准备工作

在这里插入图片描述

js文件打包

在这里插入图片描述

F:\IdeaProjects\LearnVuejs04-v2>cd 01-webpack的使用

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用>cd 01-webpack的起步

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\01-webpack的起步>webpack  ./src/main.js ./dist/bundle.js

打包命令webpack ./src/main.js ./dist/bundle.js

使用打包后的文件

在这里插入图片描述

入口和出口

其实就是将最后一条打包命令webpack ./src/main.js ./dist/bundle.js简化成webpack
在这里插入图片描述

局部安装webpack

在这里插入图片描述

文件目录

在这里插入图片描述

webpack.config.js

const path = require('path')

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

resolve相当于从__dirname（根路径）开始，cd到后面的路径；join是把__dirname与后面的路径进行拼接

下一步npm init

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (meetwebpack)
version: (1.0.0)
description:
git repository:
keywords:
author:
license: (ISC)
About to write to F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置\package.json:

{
    
    
  "name": "meetwebpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    
    "webpack": "^3.6.0"
  },
  "dependencies": {
    
    },
  "description": ""
}


Is this OK? (yes)

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>

此时文件就会生成文件package.json

在这里插入图片描述

然后继续npm install

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>npm install
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})

up to date in 9.698s

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>

然后测试成功

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>webpack
Hash: cf9d3d6649dd44115f91
Version: webpack 3.6.0
Time: 89ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.61 kB       0  [emitted]  main
   [0] ./src/main.js 256 bytes {
    
    0} [built]
   [1] ./src/js/mathUtils.js 148 bytes {
    
    0} [built]
   [2] ./src/js/info.js 79 bytes {
    
    0} [built]

新增映射npm run build

在这里插入图片描述

在这里插入图片描述
测试成功打包

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>npm run build

> [email protected] build F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置
> webpack

Hash: cf9d3d6649dd44115f91
Version: webpack 3.6.0
Time: 102ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.61 kB       0  [emitted]  main
   [0] ./src/main.js 256 bytes {
    
    0} [built]
   [1] ./src/js/mathUtils.js 148 bytes {
    
    0} [built]
   [2] ./src/js/info.js 79 bytes {
    
    0} [built]

此方法可以优先执行本地 webpack，找不到再进行全局webpack寻找

设置本地webpack(开发时依赖)

npm install [email protected] --save-dev

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>npm install [email protected] --save-dev
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})

+ [email protected]
updated 1 package in 19.974s

在这里插入图片描述
若直接输入webpack使用的就是全局环境
此后尽量使用npm run build打包

什么是loader

在这里插入图片描述

css文件处理

在这里插入图片描述
在这里插入图片描述

参考文档

在这里插入图片描述

https://www.webpackjs.com/

https://www.webpackjs.com/loaders/css-loader/

css-loader安装

在这里插入图片描述

对应目录下执行命令npm install --save-dev css-loader

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>npm install --save-dev css-loader
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})

+ [email protected]
added 10 packages from 15 contributors, removed 3 packages and updated 8 packages in 19.893s

1 package is looking for funding
  run `npm fund` for details


F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>

然后添加配置

webpack.config.js

  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        use: [ 'css-loader' ]
      }
    ]
  }

main.js中增加

// 3.依赖css文件
require('./css/normal.css')

执行命令npm run build

测试成功css-loader只负责将css文件进行加载

style-loader

在这里插入图片描述

要想把样式加载进去需要进一步操作
对应文件下执行命令
参考文档 https://www.webpackjs.com/loaders/style-loader/

npm install style-loader --save-dev

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>npm install style-loader --save-dev
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})

+ [email protected]
updated 1 package in 21.978s

1 package is looking for funding
  run `npm fund` for details


F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>

然后进行配置
webpack.config.js

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

之后，执行命令npm run build进行打包测试成功

less文件处理 – 准备工作

在这里插入图片描述

在这里插入图片描述
special.less

@fontSize: 50px;
@fontColor: orange;

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

main.js

// 4.依赖less文件
require('./css/special.less')
document.writeln('<h2>你好啊,李银河!</h2>')

写入文字是为了显示样式方便观测

less-loader

参考文档 https://www.webpackjs.com/loaders/less-loader/
在这里插入图片描述
对应目录执行

npm install --save-dev less-loader less

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>npm install --save-dev less-loader less
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'F:\IdeaProjects\LearnVuejs04-v2\01-we
bpack的使用\03-webpack的loader\node_modules\fsevents\node_modules'
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})

+ [email protected]
+ [email protected]
added 6 packages from 4 contributors, removed 44 packages and updated 2 packages in 18.156s

1 package is looking for funding
  run `npm fund` for details


F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>

然后进行配置
webpack.config.js

  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
    
    
        test: /\.less$/,
        use: [{
    
    
          loader: "style-loader", // creates style nodes from JS strings
        }, {
    
    
          loader: "css-loader" // translates CSS into CommonJS
        }, {
    
    
          loader: "less-loader", // compiles Less to CSS
        }]
      }
    ]
  }

之后，执行命令npm run build进行打包测试成功

webpack-图片文件处理

在这里插入图片描述
normal.css中将图片设置成背景

body {
    
    
  /*background-color: red;*/
  background: url("../img/timg.jpg");
}

在这里插入图片描述
参考文档 https://www.webpackjs.com/loaders/url-loader/
因为引用图片用的是url
在这里插入图片描述

首先对应文件下执行

npm install --save-dev url-loader

然后进行配置
webpack.config.js

  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
    
    
        test: /\.less$/,
        use: [{
    
    
          loader: "style-loader", // creates style nodes from JS strings
        }, {
    
    
          loader: "css-loader" // translates CSS into CommonJS
        }, {
    
    
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
    
    
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
    
    
            loader: 'url-loader',
            options: {
    
    
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000
            },
          }
        ]
      }
    ]
  }

之后，执行命令npm run build进行打包测试成功
在这里插入图片描述

file-loader

当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
由于图片过大可能会被用文件流编译，此时需要执行命令
在这里插入图片描述

npm install --save-dev file-loader

在这里插入图片描述

然后进行配置
webpack.config.js
增加
在这里插入图片描述

publicPath: 'dist/'

关于图片命名

  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
    
    
        test: /\.less$/,
        use: [{
    
    
          loader: "style-loader", // creates style nodes from JS strings
        }, {
    
    
          loader: "css-loader" // translates CSS into CommonJS
        }, {
    
    
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
    
    
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
    
    
            loader: 'url-loader',
            options: {
    
    
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      }
    ]
  }

ES6语法处理

在这里插入图片描述

参考文档 https://www.webpackjs.com/loaders/babel-loader/

对应目录下执行命令

npm install babel-loader babel-core babel-preset-env

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>npm install babel-loader babel-core babel-preset-env
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})

+ [email protected]
+ [email protected]
+ [email protected]
added 12 packages from 4 contributors and updated 4 packages in 29.605s

2 packages are looking for funding
  run `npm fund` for details


F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\03-webpack的loader>

然后进行配置
webpack.config.js

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

猜你喜欢

转载自blog.csdn.net/qq_40649503/article/details/111309868
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
周排行
决策树的部分理解
STM32软件IIC的实现
RocketMQ原理解析-HA
vue-动态路由（路由的传参和接参）
利用python对Excel中的特定数据提取并写入新表
【Ubuntu】 Ubuntu16.04搭建NFS服务
Elasticsearch基础操作与对应的curl命令行，python对接实现
JVM数据存储结构 & Java的值传递和址传递
yum命令使用指南
java基础（一）：java语法基础
每日归档
更多
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022