• webpack打包(离开脚手架,你还好吗)


    webpack打包

    有关于webpack打包在上一篇博客有说过
    这里的话主要还是想说说 vue 的打包
    没有了脚手架,你的项目还好吗?

    大致的目录结构列一下:
    在这里插入图片描述
    关于项目的代码就不贴了,主要还是说下关于打包:

    const path = require("path");
    const {
        VueLoaderPlugin
    } = require("vue-loader");
    const HTMLPlugin = require('html-webpack-plugin');
    const webpack = require("webpack");
    
    const isDev = process.env.NODE_ENV === 'development'
    
    const config = {
        target: 'web',
        entry: path.join(__dirname, "src/index.js"),
        output: {
            filename: "bundle.js",
            path: path.join(__dirname, "dist"),
        },
        plugins: [
            // make sure to include the plugin for the magic
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: isDev ? '"development"' : '"prodution"'
                }
            }),
            new VueLoaderPlugin(),
            new HTMLPlugin()
        ],
        module: {
            rules: [{
                    test: /.vue$/,
                    loader: "vue-loader",
                },
                {
                    test: /.jsx$/,
                    loader: "babel-loader",
                },
                {
                    test: /.css$/,
                    use: [
                        "style-loader",
                        "css-loader"
                    ],
                },
                {
                    test: /.(gif|jpg|jpeg|png|svg)$/,
                    use: [{
                        loader: "url-loader",
                        options: {
                            limit: 1024,
                            name: "[name]-aaa.[ext]",
                        },
                    }, ],
                },
            ],
        },
    };
    
    if (isDev) {
        config.devServer = {
            port: 8000,
            host: '0.0.0.0',
            overlay: {
                errors: true
            },
            hot: true
            // open: true
        }
    }
    
    module.exports = config
    

    大致的配置还是在webpack.config.js,主要的配置都有

  • 相关阅读:
    python 四舍五入
    Elasticsearch 入门
    Mac下ElasticSearch安装、Kibana
    Mysql 终端中文显示乱码
    Zookeeper 在 Kafka 中的作用
    mac 安装Kafka
    Creating a NuGet Package in 7 easy steps
    Updating and Publishing a NuGet Package
    ASP.NET Core 发布
    An entry point cannot be marked with the 'async' modifier
  • 原文地址:https://www.cnblogs.com/Indomite/p/14195234.html
Copyright © 2020-2023  润新知