webpack5.27+vue2.6.12版本处理css文件以及.vue文件的＜style＞css模块

一. 问题背景用如下命令加载依赖cnpm install --save vuecnpm install --save-dev vue-loadercnpm install --save-dev vue-style-loadercnpm install --save-dev vue-template-compilerwebpack中配置如下：var path = require('path');//

郭振廷

4660人浏览 · 2021-03-27 14:18:29

郭振廷 · 2021-03-27 14:18:29 发布

一. 问题背景

笔者最近在学习如何用webpack+vue搭建工程，当前webpack的版本为5.27.0，发现一些webpack3、4的写法已经不适用了，特此将正确方法记录下

A. 过时写法

用如下命令加载依赖

cnpm install --save vue
cnpm install --save-dev vue-loader
cnpm install --save-dev vue-style-loader
cnpm install --save-dev vue-template-compiler

webpack中配置如下：

var path = require('path');

//用插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    entry: {
        main: './vue'
    },
    output: {
    	publicPath: '/dist/',
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
                // 
				options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                          use: 'css-loader',
                          fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
    ,plugins: [
        // 重命名提取后的css文件
		new ExtractTextPlugin("main.css")
    ]
};

module.exports = config;

vue.js文件如下：

import Vue from 'vue';
// 导入app.vue组件
import App from './app.vue';

// 创建Vue 根实例
new Vue({
    el: '#app',
    render: h => h(App)
});

app.vue中用到了模板：

<template>
    <div>Hello {{ name }}</div>
</template>
<script>
    export default {
        data () {
            return {
                name: 'Vue.js'
            }
        }
    }
</script>
<style scoped>
    div{
        color: #f60;
        font-size: 24px;
    }
</style>

B. 报错提示

其他babel配置入标准，启动程序后，报如下错误：

ERROR in ./app.vue?vue&type=style&index=0&id=381730fa&scoped=true&lang=css&14:3
Module parse failed: Unexpected token (14:3)
File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | |

div{ | color: #f60; | font-size: 24px; @ ./app.vue 4:0-87 @ ./vue.js 7:11-31

ERROR in ./app.vue?vue&type=template&id=381730fa&scoped=true& 2:0
Module parse failed: Unexpected token (2:0) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. |

Hello {{ name }}
| @ ./app.vue 1:0-94 11:2-8 12:2-17 @ ./vue.js 7:11-31

ERROR in ./app.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. @ ./vue.js 7:11-31

1 error has detailed information that is not shown. Use ‘stats.errorDetails: true’ resp. ‘–stats-error-details’ to show it.

webpack 5.27.1 compiled with 3 errors in 4519 ms i ｢wdm｣: Failed to compile.

也就是说app.vue文件没有的得到正确解析，vue-loader以及css、template处理都失败了。网上搜了搜处理方法，但大多都是过时，终于最终调试成功，特此记录

二. 解决办法

A. 不要用ExtractTextPlugin插件，改用MiniCssExtractPlugin

可参考：MiniCssExtractPlugin

B. 不在`test: /\.vue$/`中加loaders，而是另用rule:`test: /\.css$/`来处理css文件和style标签；并用插件`VueLoaderPlugin`处理vue结果

1. 若想webpack编译提取出独立的.css文件，通过`在<head>标签中<link type='text/css'>`引用此.css，则可以不用MiniCssExtractPlugin插件，而是直接用`vue-style-loader`去解析

var path = require('path');

//用插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

var config = {

    output: {
    	publicPath: '/dist/',
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },    
    
    entry: {
        main: './vue'
    },
    // 提取独立的.css文件
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 它会应用到普通的 `.css` 文件以及 `.vue` 文件中的 `<style>` 块
            {
                test: /\.css$/,
                use: [
               		//用MiniCssExtractPlugin处理结果
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
    ,plugins: [
        // 引入VueLoader插件
        new VueLoaderPlugin(),

        // // 重命名提取后的css文件
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: "[id].css"
        })
    ]
};

module.exports = config;

最后的引用效果如下，编译出/dist/main.css的独立文件，index.html是用过link引用的
在这里插入图片描述

在这里插入图片描述

2. 若不想webpack编译提取独立的css文件，而是想通过`在<head>标签中<style>`使用css，则可以不用MiniCssExtractPlugin插件，而是直接用`vue-style-loader`去解析

写法如下：

var path = require('path');

//用新插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

var config = {
    entry: {
        main: './vue'
    },
    output: {
    	publicPath: '/dist/',
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
             // Vue.js用法
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 此rule会应用到普通的 `.css` 文件以及 `.vue` 文件中的 `<style>` 块
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }

    ,plugins: [
        // 引入VueLoader插件
        new VueLoaderPlugin()
    ]
};

module.exports = config;

但以上用法使得css以<style type=“text/css”>方式引入
在这里插入图片描述

总结

Vue和webpack随时间发展更新迭代很快，很多技术方法随时间而变化或者失效，要做好项目最好指定自己熟悉的相应版本，或者及时学习最新的搭建方式

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}$/, //不连续的两位字母// /^