美文网首页
vue+webpack:webpack-dev-server -

vue+webpack:webpack-dev-server -

作者: _empty_cup | 来源:发表于2021-01-27 12:18 被阅读0次

    话不多说,直接说问题
    1.考虑:配置是否正确

    const path = require("path")
    const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
    const webpack = require('webpack'); //访问内置的插件
    const VueLoaderPlugin = require("vue-loader/lib/plugin");
    module.exports = {
        mode:'development',
        target: 'web',
        entry: './src/main.js',
        output: {
            filename: "js/[name].js",
            path: path.join(__dirname, 'dist'), //对应一个绝对路径
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: ['vue-loader']
                },
                {
                    test: /\.css$/,
                    use: [
                        "style-loader",
                        "css-loader"
                    ]
                },
                {
                    test: /\.png$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                          limit: 10 * 1024, // 10 KB
                          name: 'img/[name].[hash:7].[ext]'
                        }
                    }
                },
                {
                    test: /\.less$/,
                    use: [
                        "style-loader",
                        "css-loader",
                        "less-loader"
                    ]
                },
                {
                    test:/\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                }
            ],
        },
    devServer: {
            contentBase: ['public', path.join(__dirname, 'src/')],
            open: true,
            inline: true,
            compress: true,
            hotOnly:true,
            // publicPath:"http://localhost:8080"
        },
        plugins: [
            //配置添加 Vue Loader 的插件VueLoaderPlugin
            //它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                title: 'Hello webpack11',
                template: "./public/index.html"
            }),
            new webpack.DefinePlugin({
                "BASE_URL": JSON.stringify('./')
            }) 
        ]
    }
    

    2.配置正确的话,考虑webpack版本 webpack-dev-server版本兼容
    3.webpack5.0的话,webpack.config.js需要配置target: 'web',
    4.开启服务:package.josn中scripts:(webpack的不同版本)
    5.x 是 webpack serve --config webpack.config.js
    4.x 是 webpack-dev-server --config webpack.config.js

    欢迎👏评论区交流

    相关文章

      网友评论

          本文标题:vue+webpack:webpack-dev-server -

          本文链接:https://www.haomeiwen.com/subject/tctazktx.html