关于vue-loader的配置

最新推荐文章于 2025-05-14 14:41:36 发布

易意逸

最新推荐文章于 2025-05-14 14:41:36 发布

阅读量835

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43170297/article/details/102543551

前端专栏收录该内容

19 篇文章

订阅专栏

本文详细探讨了vue-loader的工作原理及配置细节，包括组件的拆分、样式处理、预加载和懒加载等关键配置，旨在帮助开发者更好地优化Vue项目的构建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

'use strict'
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')

module.exports = {
  mode: 'development', /* 设置为开发环境*/
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          hotReload: true /* 开启热重载*/
        }
      },
      /* 应用普通的js以及vue中的js*/
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      /* 将应用到普通的.css文件中以及vue中<style> */
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader
        ],
        loader: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              indentedSyntax: true,
              sassOptions: {
                indentedSyntax: true
              }
            }
          }
        ]
      },
      /* 关于ts的规则配置
      * 安装ts-loader的命令:  npm install -D typescript ts-loader
      * */
      {
        test: /\.ts$/,
        loader: 'ts.loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      },

      /* 一个返回原始的 HTML 字符串的 loader
      * 安装pug-plain-loader的命令: npm install -D pug pug-plain-loader
      *
      * */
      {
        test: /\.pug$/,
        loader: 'put-plain-loader'

      },

      /* 进行代码校验
      * 安装eslint代码校验器: npm install -D eslint eslint-loader
      *
      * */
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node-modules/
      },

      /* Vue 单文件组件的样式部分的代码校验
      *  安装命令: npm install -D styleint-webpack-plugin
      * */
    ]
  },
  plugins: [
    /* 确保引入这个插件来实行加载运行*/
    new VueLoaderPlugin,
    new MiniCssExtractPlugin({
      filename: 'style.css'
    }),
    new StyleLintPlugin({
      files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
    })

  ]

}