Webpack基本使用

古城微笑少年丶 2022-12-09 15:52 153阅读 0赞

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70_pic_center]

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

全局安装  
npm install -g webpack webpack-cli

安装后查看版本号  
webpack -v

（1）安装webpack工具

npm install -g webpack webpack-cli

（2）创建js文件用于打包操作

![在这里插入图片描述][20200922210906310.png_pic_center]

-- 文件a.js
    function sub(a,b){ 
        return a-b;
    }
    
    module.exports={ 
        sub
    }
    
    -- 文件b.js
    function add(a,b){ 
        return a+b;
    }
    
    module.exports={ 
        add
    }
    
    
    -- 文件style.css
    
    
    body{ 
    
        background-color: red;
    }
    
    
    --文件main.js，需要引入需要打包的文件，直接引入或者关联引入
    const a=require('./a.js')
    const b=require("./b.js")
    require("./style.css")
    document.write(a.sub(3,2)+"---"+b.add(1,2))

（3）安装css加载器  
npm install --save-dev style-loader css-loader

（4）构建配置文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]

const path=require("path");
    module.exports = { 
        //入口函数
        entry: "./src/js/main.js",
        //输出路径
        output: { 
            path: path.resolve(__dirname,"./dest"),
            filename: "bundle.js"
        },
        module: { 
            //CSS加载
            loaders: [
                {  test: /\.css$/, 
                    use: ["style-loader","css-loader" ]}
            ]
        }
    };

（5）执行打包  
webpack \#有黄色警告  
webpack --mode=development \#打包后文件格式化  
webpack --mode=production \#打包后文件压缩一行

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

（6）测试使用  
创建html页面，引入打包后的文件即可

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="../dest/bundle.js"></script>
    </head>
    <body>
      
    </body>
    </html>

![在这里插入图片描述][20200922211009877.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/69c33e2d946a43b18ce42902e4fafff1.png
[20200922210906310.png_pic_center]: /images/20221123/ac6e95741a5946699209071c49cd7f54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e37f93c9d8ee4434a158cb36e1e9bb7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/93fafaef05e443efbbf3a786b2925fd8.png
[20200922211009877.png_pic_center]: /images/20221123/f4121b58de6040c7a3292f64799a8a6d.png