技術標籤：筆記vue.jsjavascriptwebpack

先貼webpack.config.js的配置檔案

const path =  require('path');
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: process.env.NODE_ENV || 'production'
 
,
    devtool: "source-map",
    target:'web',
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:"build.js",
        path:path.join(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader:
 
 'vue-loader'
            },
            {
                test:/\.jsx$/,
                use:['babel-loader']
            },
            {
		        test: /\.styl/,
		        use: [
		            'vue-style-loader',
		            'css-loader',
		            {
		                loader: 'postcss-loader',
 

		                options: { sourceMap: true }
		            },
		            'stylus-loader'
		        ]
            },
            {
                test:/\.css$/,
                use:[
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test:/(\.gif|\.jpg|\.jpeg|\.png|\.svg)$/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            name:'[name][hash].[ext]',
                            limit:1024
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ]
}
if(process.env.NODE_ENV=='development'){
    config.plugins.push(new webpack.NoEmitOnErrorsPlugin())
    config.plugins.push(new webpack.HotModuleReplacementPlugin())
    config.devServer={
        contentBase: path.join(__dirname, 'dist'),
        overlay:{
          errors:true
        },
        hot:true,
        compress: true,
        port: 9000
    }
}
module.exports = config;

配置版本

 "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-helper-vue-jsx-merge-props": "^2.0.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.1",
    "postcss": "^8.2.4",
    "postcss-loader": "^4.2.0",
    "style-loader": "^2.0.0",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",
    "url-loader": "^4.1.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-loader-plugin": "^1.3.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },

vue檔案樣式

<style lang="stylus" scoped>
    #app
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        #cover
            position absolute
            left 0
            right 0
            top 0
            bottom 0
            background-color #999
            opacity 0.2
            z-index -1
</style>

按理說也加入了VueLoaderPlugin這個外掛了，但是npm run dev 依舊報錯

我就很納悶了，我直接引入stylu檔案就可以直接執行，vue裡面寫stylus樣式就報錯
經過多次網上查詢未果，發現有同學是將styl放入後面push進去的，於是程式碼改為

const path =  require('path');
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: process.env.NODE_ENV || 'production',
    devtool: "source-map",
    target:'web',
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:"build.js",
        path:path.join(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test:/\.jsx$/,
                use:['babel-loader']
            },
            {
                test:/\.css$/,
                use:[
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test:/(\.gif|\.jpg|\.jpeg|\.png|\.svg)$/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            name:'[name][hash].[ext]',
                            limit:1024
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ]
}
if(process.env.NODE_ENV=='development'){
    config.module.rules.push({
        //css前處理器，使用模組化的方式寫css程式碼
        //stylus-loader專門用來處理stylus檔案，處理完成後變成css檔案，交給css-loader.webpack的loader就是這樣一級一級向上傳遞，每一層loader只處理自己關心的部分
        test: /\.styl/,
        use: [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'postcss-loader',
                options: { sourceMap: true }
            },
            'stylus-loader'
        ]
    });
    config.plugins.push(new webpack.NoEmitOnErrorsPlugin())
    config.plugins.push(new webpack.HotModuleReplacementPlugin())
    config.devServer={
        contentBase: path.join(__dirname, 'dist'),
        overlay:{
          errors:true
        },
        hot:true,
        compress: true,
        port: 9000
    }
}
module.exports = config;

重新npm run dev 就可以了 我裂開 找了一兩個小時的問題解決方案