webpack使用示例

不念不忘少年蓝@ 2023-10-11 15:19 20阅读 0赞

### 一、初始化一个node项目 ###

*  npm init -y
 *  创建src目录，并创建三个文件
    
    1.  commonjs

exports.info = function (str) {
        
        console.log(str)
        document.write(str)
    }

1.  utils.js

exports.add = (a,b)=>  a + b

如果项目中有多个不同模块的文件，user.js，order.js…，则同时通过script标签引入到js中非常臃肿，而且会发生多次网络请求，可用webpack将多个js文件打包。

1.  main.js

const util = require("./util")
    const common = require("./common")
    
    console.log(common.info('uuid'),util.add(10,90))

*  在项目下新建webpack.config.js来配置打包规则

//导入path模块
    const path = require('path')
    
    //定义JS打包规则
    module.exports = {
        
        entry:'./src/main.js', //入口文件
        output:{
        
            path:path.resolve(__dirname,"./dist"),
            filename:'bundle.js'
        }
    
    }

执行`webpack`命令进行打包  
![在这里插入图片描述][20210129101302850.png]  
打包成功以后在项目根目录下生成了一个bundle.js

![在这里插入图片描述][20210129101427505.png]  
可以通过html文件引入这个js，然后执行。

其他命令：  
1. webpack -w 监听文件变化，自动打包  
2. webpack -h 查看帮助命令

#### 打包css ####

*  安装依赖

npm install --save-dev style-loader css-loader

*  创建一个style.css文件

body{
        
        background: antiquewhite;
    }

*  在main.js中引入  
    ![在这里插入图片描述][20210129103328248.png]
 *  webpack -v 重新打包

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70]  
可以看到css已经生效，webpack将css文件也打包到了bundle.js文件中。

[20210129101302850.png]: https://img-blog.csdnimg.cn/20210129101302850.png
[20210129101427505.png]: https://img-blog.csdnimg.cn/20210129101427505.png
[20210129103328248.png]: https://img-blog.csdnimg.cn/20210129103328248.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210129103423633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2,size_16,color_FFFFFF,t_70