教育项目--VUE进阶【二】【18】

曾经终败给现在 2023-10-05 18:16 16阅读 0赞

#### JS打包 ####

*   *  四、JS打包
     *   *  1、webpack目录下创建配置文件webpack.config.js
         *  2、命令行执行编译命令
         *  3、webpack目录下创建index.html
         *  4、浏览器中查看index.html

### 四、JS打包 ###

#### 1、webpack目录下创建配置文件webpack.config.js ####

以下配置的意思是：读取当前项目目录下src文件夹中的`main.js`（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
    module.exports = {
        
        entry: './src/main.js', //配置入口文件
        output: {
        
            path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
            filename: 'bundle.js' //输出文件
        }
    }

#### 2、命令行执行编译命令 ####

`webpack` \#有黄色警告  
`webpack --mode=development` \#没有警告【使用这个】  
\#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩  
也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
        
        //...,
        "dev": "webpack --mode=development"
     }

#### 3、webpack目录下创建index.html ####

引用bundle.js

#### 4、浏览器中查看index.html ####

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210122184125880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70