vue基础九（打包）

vue脚手架中打包

1. 进入vue项目目录，在终端中输入打包命令 npm run build
2. 打包完成后，在vue项目目录中生成dist文件夹，dist文件夹中包含static文件夹（放置静态文件夹css，js ,img, fonts），favicon.ico和index.html文件
3. 在浏览器中打开index.html文件，即为完整项目。

vue打包底层操作

1. 创建vue文件夹

2. 进入文件，终端输入命令 ，初始化文件
   npm init -y
   文件夹中出现package.json文件夹

3. 安装vue
   npm i -S vue
   文件夹中新增node_modules文件夹和package-lock.json文件

4. 新建public文件夹，新建index.html文件（vue入口文件）

5. 新建src文件夹，新建文件App.vue（显示界面），新建文件main.js
   main.js是项目的入口文件，项目中的所有页面都会加载该文件。
   main.js的作用：1）实例化vue，2）放置项目中经常会用到的插件和CSS样式，3）存储全局变量

    import Vue from 'vue'
    import App from './App.vue'
    
    new Vue({
        el:"#app",
        render:h=>(App) //将App.vue上的内容渲染到#app上
    })
   

6. 安装vue所需的插件

    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
   

安装完成后插件会显示在package.json中的devDependencies（项目开发所依赖的模块）中。

7. package.json中scripts里添加
   “build”:“webpack --mode=development” //打包

8. 根目录新建文件webpack.config.js（配置文件）

    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'
            }),
        ],//项目中使用的插件
    }
   

9. 配置成功，进行打包

    npm run build