学习搭建项目流程记录（二）

最新推荐文章于 2022-05-10 13:35:00 发布
最新推荐文章于 2022-05-10 13:35:00 发布
阅读量104 收藏
点赞数 1
分类专栏： webpack项目搭建
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39773416/article/details/108225561
版权

其他loader

一般来说, 一个前端项目除了 js 文件外, 还有一些常用的文件, 如

  • 图片文件
  • css 文件

对于这些文件, webpack 都不会打包, 需要我们安装对应的 loader 帮助 webpack 打包

打包图片文件

使用插件file-loader来打包图片文件
安装

npm install -D file-loader
  • 然后在App.vue导入一张照片
  • 到webpack.config.js配置一下
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 模式
  mode: 'development',
  // 打包的入口
  entry: './src/main.js',
  // 打包的出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // loader插件配置
  module: {
    rules: [
      // 配置解析vue文件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'file-loader',
        options: { // 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
          name: '[name].[ext]' // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
        }
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          limit: 2048 // limit: 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
        }
      }
    ]
  },
  plugins: [
    // 一定要引入此插件
    new VueLoaderPlugin()
  ],
  // 使用别名
  // 作用就是：webpack打包会生成三个文件
  /*  
     runtime only 的文件 vue.common.js
     compiler only 的文件 compiler.js
     runtime + compiler 的文件 vue.js 
      
  */
  // 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  }
}

url-loader: 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

  • 所以我们安装一下，为了尽量优化项目，配置信息在上面代码，由于 url-loader 依赖 file-loader, 因此安装 url-loader 需要先安装 file-loader, 一般来说执行如下命令更适合
npm install -D file-loader url-loader
打包css

分别用到css-loader和style-loader

  • css-loader: 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件
  • style-loader: 将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
    比如在项目中css之间互相引用，css-loader 为分析 css 文件之间的引用关系, 最终形成一个整体文件，再通过 style-loader 将 css-loader 的内容挂载到页面的 head 的 style 标签中
  • 在app.vue文件中导入css文件后
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 模式
  mode: 'development',
  // 打包的入口
  entry: './src/main.js',
  // 打包的出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // loader插件配置
  module: {
    rules: [
      // 配置解析vue文件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'file-loader',
        options: { // 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
          name: '[name].[ext]' // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
        }
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          limit: 2048 // limit: 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 执行顺序是从右到左， 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件，将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
      }
    ]
  },
  plugins: [
    // 一定要引入此插件
    new VueLoaderPlugin()
  ],
  // 使用别名
  // 作用就是：webpack打包会生成三个文件
  /*  
     runtime only 的文件 vue.common.js
     compiler only 的文件 compiler.js
     runtime + compiler 的文件 vue.js 
      
  */
  // 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  }
}
打包stylus
  • stylus: 是 stylus 文件预处理程序, 作用是将 stylus 编译成 css 格式
  • stylus-loader: 加载 stylus 文件, 调用 stylus 预处理程序形成 css 文件
npm install -D stylus stylus-loader

const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 模式
  mode: 'development',
  // 打包的入口
  entry: './src/main.js',
  // 打包的出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // loader插件配置
  module: {
    rules: [
      // 配置解析vue文件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'file-loader',
        options: { // 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
          name: '[name].[ext]', // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
          // limit:2048 // 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
        }
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          limit: 2048
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 执行顺序是从右到左， 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件，将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
      },
      {
        test: /\.styl(us)?$/,
        use: ['style-loader', 'css-loader', 'stylus-loader']
      }
    ]
  },
  plugins: [
    // 一定要引入此插件
    new VueLoaderPlugin()
  ],
  // 使用别名
  // 作用就是：webpack打包会生成三个文件
  /*  
     runtime only 的文件 vue.common.js
     compiler only 的文件 compiler.js
     runtime + compiler 的文件 vue.js 
      
  */
  // 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  }
}

处理 vue 文件中的 stylus

  • vue-style-loader: 是 vue-loader 自带的 style-loader, 在 style-loader 的基础上, 还可以处理 vue 文件中的样式
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 模式
  mode: 'development',
  // 打包的入口
  entry: './src/main.js',
  // 打包的出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // loader插件配置
  module: {
    rules: [
      // 配置解析vue文件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // {
      //   test: /\.(jpg|jpeg|png|svg)$/,
      //   loader: 'file-loader',
      //   options: { // 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
      //     name: '[name].[ext]', // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
      //     // limit:2048 // 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
      //   }
      // },
      // 上下两个好像不可以同时存在
      {
        test: /\.(jpg|jpeg|png|svg|gif)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          limit: 2048
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 执行顺序是从右到左， 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件，将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
      },
      {
        test: /\.styl(us)?$/,
        use: ['style-loader', 'css-loader', 'stylus-loader']
      },
      // 处理vue文件中的style,其实也是只使用上面这里就可以了
      // {
      //   test: /\.styl(us)?$/,
      //   use: ['vue-style-loader', 'css-loader', 'stylus-loader']
      // }
    ]
  },
  plugins: [
    // 一定要引入此插件
    new VueLoaderPlugin()
  ],
  // 使用别名
  // 作用就是：webpack打包会生成三个文件
  /*  
     runtime only 的文件 vue.common.js
     compiler only 的文件 compiler.js
     runtime + compiler 的文件 vue.js 
      
  */
  // 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  }
}
html-webpack-plugin插件的使用

这个插件就是用来生成index.html到dist里面的

// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
  plugins: [
    // 一定要引入此插件
    new VueLoaderPlugin(),
    // 使用并且以src里面的index作为模板才行，相当于复制一个
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
no的征程
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue脚手架搭建以及创建Vue项目流程
weixin_68658847的博客
04-25 3万+
Vue脚手架的创建以及用脚手架创建项目的全套流程
webpack混入全局样式的两种方式
前端精髓
05-08 728
如果你使用 stylus 预处理器，默认支持 import 混入一些全局样式。 { test: /\.styl(us)?$/, use: [ MpxWebpackPlugin.wxssLoader(), { loader: 'stylus-loader', options: { stylusOptions: { import: [resolve('./src/theme.styl')], } }
vue中如何引入公共样式的的styl文件
热门推荐
莫普斯
06-13 1万+
刚开了个新项目，仿照视频去写，引用了styl格式的css，从来没引用过，在vue文件中还可以正常引用，只需要在<style scoped lang="stylus" rel="stylesheet/stylus">中添加 lang="stylus"即可但是在main.js中引入公共样式的时候，死活出不来，寻求了百度爸爸，安装stylus stylus-loader style-load...
Webpack的基本使用
denghuocc
08-13 226
一项目初始化 1. init初始化 使用npm init -y完成项目初始化, 会生成 package.json 文件 init: 完成项目初始化 -y: 使用默认选项 2. 安装webpack 在命令行中执行npm install webpack webpack-cli -D -D: 安装开发环境依赖, 是–save-dev 的简写 二 编写项目入口 1. 编写index.html 在项目根目录下创建一个 index.html, 作为项目主页文件, 编写如下内容 <!DOCTYP
机器学习开发项目流程
迪文的博客
05-10 1451
机器学习开发项目流程1. 机器学习开发流程1.1 数据1.2 模型选择1.3 模型训练1.4 模型测试1.5 模型部署 机器学习不只是模型！ 传统的软件开发流程大致如下： 相比较于机器学习的对学科性质，传统的软件开发流程并不能解决机器学习开发过程中的问题。 1. 机器学习开发流程 本篇基于前文 机器学习项目周期进行进一步拓展。 1.1 数据 一切从数据开始。 对于要实现的项目目标，我们是否能获取到有效数据来支持项目开发？ 数据的质量比模型本身更重要，高质量的数据是机器学习开发的关键。 一些可扩展的数据储存
Azure机器学习模型搭建实验.doc
05-17
Azure 机器学习模型搭建实验 Azure 机器学习（AML）是一项基于 Web 使用的机器学习服务，属于人工智能的一个分支。...本实验旨在介绍 Azure 机器学习模型搭建的整个流程，从数据到建模并最终评估预测的整个流程。
点单平台与后台管理系统的项目记录
05-15
点单平台与后台管理系统是现代餐饮业不可或缺的一部分，它们提供了高效...通过这样的记录，我们可以清晰地看到项目从需求分析到实现的整个过程，以及在开发中学习和应用的新技术，这对于团队协作和项目维护都至关重要。
毕设项目——基于SSM的求职招聘网站（内含搭建流程）
05-08
文件包括：搭建流程、表结构设计说明、项目代码、环境安装包、数据库脚本。 技术技术：Spring、SpringMVC、Mybatis、MySQL、BootStrap、Excharts、LayUI、AJAX、HTML、CSS、JS。 功能包括： 管理员：登录、主页系统...
OneM是集杂志、音乐、视频的综合性App, 项目完全使用Redux状态管理，搭建项目，支持自定义多种UI组件和工具
03-10
二、项目实战与练习 为了让学习者能够将理论知识与实践相结合，我们特别准备了项目实战与练习部分。这部分内容包含了多个精心设计的Android项目案例，从需求分析、设计思路到实现过程，都有详细的讲解和代码示例。...
毕设项目——基于SSM的大学生食堂外卖点餐系统（内含搭建流程）
05-04
文件包括：搭建流程、表结构设计说明、项目说明书、项目代码、环境安装包、数据库脚本。 技术包括：Spring、SpringMVC、Mybatis、MySQL、JSP、BootStrap、LayUI、AJAX、HTML、CSS、JS。 功能包括： 食堂管理员：登录...
ChatGPT原理1-3
06-20
ChatGPT原理1-3
aiohttp-3.4.0b2.tar.gz
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
小程序版通过CNN训练识别印刷体数字和字母-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
AI+智慧校园建设方案PPT(100页).pptx
06-20
智慧校园大数据信息化AIOT平台建设整体解决方案是一个综合性的校园智能化升级计划，旨在通过应用物联网、大数据、人工智能等高新技术，打造一个安全、便捷、绿色的校园环境。该方案遵循国家教育信息化2.0规划和相关标准，强调技术在教育领域的深度应用。 方案的核心内容包括全场景的智能互联、物信融合、AI赋能创新应用，以及校园营运指挥中心的建设。它涵盖了智慧管理、智慧服务、智慧教学等多个方面，通过SAAS、PAAS、DAAS、IAAS等多层次的系统架构，实现从数据存储、管理到智能分析和应用的全面覆盖。 智慧应用聚焦于校园特色场景，如教室、宿舍、图书馆和食堂，通过AI视频智能分析技术，提供便捷服务。方案还包括智能安防、智慧消防、能耗监管等，以实现校园的智能化管理。例如，人脸门禁系统提供无感通行，提高安全性和便捷性；车辆管理系统通过轨迹分析和布控，优化交通秩序。 此外，方案还强调了智能照明、智能水控和电控等节能环保措施，以及通过智能语音分析和录播方案提升教学质量。智慧宿舍通过人脸宿管和智能节电，提高宿舍管理效率。整体上，该方案通过技术集成和创新，推动校园向智能化、信息化转型，为师生创造更安全、便捷、环保的学习和生活环境。
pyzmq-26.0.0b2-cp312-cp312-win_arm64.whl
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Pygments-0.10.tar.gz
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
QT中QSettings的使用系列之二：保存和恢复应用程序主窗口
06-20
QT中QSettings的使用系列之二：保存和恢复应用程序主窗口
基于 Python实现多模态，语音和文本结合的情感识别，大模型finetune
06-20
【作品名称】：基于 Python实现多模态，语音和文本结合的情感识别，大模型finetune 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：多模态，语音和文本结合的情感识别，大模型finetune 首先要准备： 1.IEMOCAP数据集完整版的解压版本 2.Hugging face里的BERT-base-uncased文件 3.Hugging face里的wav2vec2-xls-r-300m文件 运行我在BERT-base项目里给出的data_pp文件，大概5分钟会得到一个pickle，这个pickle是为了给utils来拿取数据的。 如果有环境问题可以直接查看我给的环境配置单 直接点运行就可以了
cryptography-0.5.2-cp34-none-win32.whl
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
ssm框架的搭建与使用的实训记录
05-19
实训目标：通过本次实训，学习SSM框架的搭建与使用，熟悉基本的开发流程和操作步骤。 实训内容： 1. 搭建环境：安装JDK、Tomcat、Maven等必要的软件和工具。 2. 创建项目：使用Maven创建一个基于SSM框架的Web项目...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值