单文件组件

今天上课讲了webpack的相关内容，想记录下来以防自己忘记

1.webpack

• webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理。webpack是通过不同的loader将这些资源加载后打包，然后输出打包后的文件。
  - 官网
• webpack版本：v4.x
  - webpack有一个核心配置文件：webpack.config.js
• webpack的安装
  全局安装webpck:npm install webpack -g
  全局安装webpack-cli:npm install webpack-cli -g
  在项目文件夹中局部安装webpack

npm install webpack -D

在项目文件夹中局部安装webpack-cli

npm install webpack-cli -D

webpack的打包命令

webpack 源代码文件路径 -o 打包生成文件路径 --mode development

案例演示

• webpack的配置

webpack.config.js，必须放在项目根目录下
常见配置项，配置完成后打包命令简化为:webpack

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

案例演示

• 添加自动打包服务,不用输入webpack打包命令，运行npm run
  dev自动打包并将打包文件保存在项目根路径中，但不会显示出来，而是驻留在内存里 npm安装webpack-dev-server模块

  "scripts": {
    "dev": "webpack-dev-server --open"
  },
  

案例演示

ES6模块的导入方式

导入文件语法：

import 文件所在路径

文件是js时可以省略扩展名，是index.js时可以省略文件名
案例演示
导出模块成员语法

  export let num = 10;
    export function f(){}
  export default{ 成员1，成员2}

导入模块成员语法

  import {成员} from 模块文件所在路径
  import * as 别名 from 模块文件所在路径
  import obj  from  模块文件所在路径

案例演示

• 常见webpack的加载器
• style-loader和css-loader

当css样式文件在main.js中进行导入时需要使用以上加载器，否则无法使用样式
npm安装style-loader和css-loader模块
配置webpack文件

module:{
rules:
    [
      {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

案例演示

sass-loader

当使用sass样式文件时，使用以上加载器
npm安装sass和sass-loader模块
配置webpack文件

 rules:
	    [
	      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
	    ]

案例演示

url-loader

• 当css样式文件中存在url加载图片等文件时，使用以上加载器 npm安装url-loader和file-loader模块
• 配置webpack文件

 rules:
    [
      {test:/\.(jpg|gif|png|jpeg)$/i,use:['url-loader']}
    ]

案例演示

• webpack对vue代码的处理

安装vue模块，并在main.js中导入vue.js（注意引入的路径位置）

import Vue from ‘…/node_modules/vue/dist/vue.js’

在vue实例对象中，采用render方式显示组件，会将实例对象中其他的标签或组件全部覆盖

  render:function(h1){
      return h1(login)
  }