Webpack入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/xiuyuandashen/article/details/113256418

webpack简介

webpack是当前前端最热门的前端资源模块化管理和打包工具。
Webpack可以将多种静态资源js、css、less等转化成一个静态文件，减少了页面的请求，也压缩的文本的大小（减少暴露源码的风险也提高了安全性）。
下面是官网的图
在这里插入图片描述

webpack安装

npm install -g webpack webpack-cli
webpack -v 查看安装的版本
在这里插入图片描述

webpack合并打包js

1、创建node项目npm init -y
在这里插入图片描述

2、创建一个src目录，在里面写js文件

在这里插入图片描述

common.js

module.exports = {
    print(str){
        console.log(str)
    }
}

util.js


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

3、在src下创建一个入口文件 main.js，模块集中进行引入

main.js


const common = require("./common.js")
const util  = require("./util.js")

common.print("hello world");
console.log("100 + 20 = ",util.add(100,20));
document.write("100 + 20 = ",util.add(100,20));

4、在根目录创建一个webpack.config.js文件配置打包规则

webpack.config.js


// 导入path模块，该模块是node.js内置模块
const path = require('path')

//定义 js 打包规则
module.exports = {
    // entry 入口文件位置
    entry:"./src/main.js",
    //打包输出目录
    output:{ 
        //配置输出目录
        path:path.resolve(__dirname,"./dist") ,
        //打包压缩后的文件名称
        filename:"allToOne.js",

        
    }

}

5、执行webpack查看效果（根据配置文件webpack.config.js打包）

在这里插入图片描述

打包后的文件
在这里插入图片描述
我们在dist下创建一个html使用以下打包后的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./allToOne.js"></script>
</body>
</html>

在这里插入图片描述

webpack -w 监听，如果有文件改动，他会自动重新编译打包
webpack -h 帮助

Webpack CSS打包

webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要loader进行转换。

1、安装style-loader和 css-loader

css-loader 是将css装载到JavaScript
style-loader 是让JavaScript认识css

使用 npm install --save-dev style-loader css-loader 安装
在这里插入图片描述

2、配置 wabpack.config.js,主要是添加module属性

// 导入path模块，该模块是node.js内置模块
const path = require('path')

//定义 js 打包规则
module.exports = {
    // entry 入口文件位置(从哪里开始进行编译打包)
    entry:"./src/main.js",
    //打包输出目录(编译成功以后把内容输出到哪里去)
    output:{ 
        //定义输出指定的目录 __dirname 是一个常量 表示当前项目的根目录
        path:path.resolve(__dirname,"./dist") ,
        //打包压缩后的输出的文件名称
        filename:"allToOne.js",
        
    },
    //添加模块 
    module:{
        rules:[
            {
                // 把项目中所有的 .css 结尾的文件进行打包
                test: /\.css$/ ,
                // 使用的工具
                use:["style-loader","css-loader"]
            }
        ]
    }
    

}

3、在src目录下创建css文件
在这里插入图片描述
style.css

body{
    background-color: pink;
}

4、在入口文件main.js，中进行引入

const common = require("./common.js")
const util  = require("./util.js")

//引入 style.css
require("./css/style.css")

common.print("hello world");
console.log("100 + 20 = ",util.add(100,20));
document.write("100 + 20 = ",util.add(100,20));