vue-打包

最新推荐文章于 2024-11-14 19:13:04 发布

颖颖丫

最新推荐文章于 2024-11-14 19:13:04 发布

阅读量77

点赞数

文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/l_y_h___/article/details/120990255

版权

本文详细介绍了如何在不使用Vue CLI的情况下手动配置Vue.js项目，包括vue.config.js中的基本设置，以及webpack.config.js的配置，如入口文件、输出路径、模块处理、插件等。同时，还涉及到Babel和Vue Loader的使用，以及HTMLWebpackPlugin的配置来生成HTML模板。

摘要由CSDN通过智能技术生成

vue.config.js

module.exports = {//webpack的配置对象
    publicPath: "./",//基本路径
    outputDir:'dist',//打包文件输出的目录
    assetsDir: "static",//放置生成的静态资源 (js、css、img、fonts)文件夹 的 (相对于 outputDir 的) 目录
}

webpack.config.js

（不用脚手架）

npm init -y(初始化文件)

npm i -D @babel/core @babel/preset-env babel-loader css-loader html-webpack-plugin scss-loader style-loader vue-loader vue-template-compiler webpack webpack-cli

const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
    entry:"./src/main.js",//人口文件的地址
    output:{
        path:path.resolve(__dirname+'/dist'),//绝对路径
        filename:'bundle.js'//输出文件的名称,打包后的主文件的名称
    },//输出文件夹的配置
    module:{//使用哪些模块处理文件
        rules:[
            {test:/\.vue$/,use:'vue-loader'},//以什么模块去处理某些类型的文件
        {test:/\.s[ca]ss$/,use:['style-loader','css-loader','scss-loader']},
        {
            test:/\.m?js$/,
            use:{
                loader:'babel-loader',
                options:{
                    presets:['@babel/preset-env']
                }
            }
        },
        {test:/\.(png|jpe?g|gif|svg|webp)$/,type:'asset/resource'}

        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: 'Webpack Vue',
            template:'./public/index.html'
        }),
    ],//插件
}