前端模块化与Webpack

青旅半醒 2022-11-21 09:56 238阅读 0赞

### 前端模块化是js与js之间的调用 ###

##### 如何模块化 #####

*  1 es5代码之间的模块化  
    01.js负责创建方法

//1创建js方法
    const sum = function(a,b) { 
        return parseInt(a) + parseInt(b)
    }
    const subtract = function(a,b) { 
        return parseInt(a) - parseInt(b)
    }
    
    //2 设置哪些方法可以被其他js调用
    module.exports = { 
        sum,
        subtract
    }

02.js负责调用01.js中的方法

//调用01.js中的方法
    //1引入01.js文件 ./代表当前路径，../代表上一级路径
    const m = require('./01.js')
    
    //2调用
    console.log(m.sum(2,6))
    console.log(m.subtract(1,10))

在终端界面使用命令： node 02.js 即可：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center]

*  2 如果使用es6写法实现模块化操作，在nodejs环境中不能直接运行，需要使用babel把es6代码转换成es5代码，才可以在nodejs中运行  
    有两种写法  
    第一种：在es6module1文件夹下分别创建01.js和02.js  
    01.js负责创建方法

//定义方法，设置哪些方法可以被其他js调用
    export function getList() { 
        console.log('getList......')
    }
    
    export function getUser() { 
        console.log('getUser......')
    }

02.js负责调用01.js中的方法

//调用01.js的方法，引入01.js文件，进行调用
    import { getList,getUser} from './01.js'
    
    //调用方法
    getList()
    getUser()

创建文件夹es6module11用于存放转换成es5代码的js文件，然后使用命令 babel es6module1 -d es6module11 将写好的es6代码的js文件转换成es5写法的js文件，然后在es6module11下终端打开后执行命令：node 02.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 1]  
第二种：在es6module2文件夹下分别创建01.js和02.js  
01.js负责创建方法

//定义方法，设置哪些方法可以被其他js调用
    export default { 
        get() { 
            console.log('get......')
        },
        test() { 
            console.log('test......')
        }
    
    }

02.js负责调用01.js中的方法

//调用01.js的方法，引入01.js文件，进行调用
    import m from './01.js'
    
    //调用方法
    m.get()
    m.test()

创建文件夹es6module22用于存放转换成es5代码的js文件，然后使用命令 babel es6module2 -d es6module22 将写好的es6代码的js文件转换成es5写法的js文件，然后在es6module22下终端打开后执行命令：node 02.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 2]

### Webpack ###

##### 什么是Webpack #####

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。  
从图中我们可以看出，Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 3]

##### 安装Webpack工具 #####

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

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

##### 初始化项目 #####

1、创建webpack文件夹，例如webpackdemo，进入此目录，执行命令：

npm init -y

2、创建src文件夹  
3、src下创建common.js

exports.info = function (str) { 
         //浏览器中输出
        document.write(str);
    }

4、src下创建utils.js

exports.add = function (a,b) { 
        return a+b;
    }

5、src下创建main.js

const common = require('./common')
    const utils = require('./utils')
    
    common.info("Hello World!"+utils.add(1,9))

##### JS打包 #####

1、webpack目录下（即webpackdemo文件下）创建配置文件webpack.config.js，配置打包信息  
以下配置的意思是:读取当前项目目录下src文件夹中的main.js(入口文件)内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

2、命令行执行打包命令（在项目的根目录下即webpackdemo文件下）

webpack   #有黄色警告
    webpack --mode=development   #没有警告
    #执行后查看bundle.js里面包含了上面两个js文件的内容并进行了代码压缩

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 5]  
3、最终测试：  
创建一个html文件，引入打包之后js文件，使用浏览器查看效果

##### CSS打包 #####

1、在src下创建一个css文件：style.css  
2、在main.js中引入style.css文件

//引入css文件
    require('./style.css')

3、安装style-loader和css-loader  
说明：Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader转换。Loader可以理解为是模块和资源的转换器。首先我们需要安装相关Loader插件，css-loader是将css装载到javascript;style-loader是让javascript认识css

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 6]  
4、修改webpack.config.js文件

const path = require("path") //Node.js内置模块
    module.exports = { 
        entry : './src/main.js', //配置入口文件
        output: { 
            path: path.resolve(__dirname,'./dist'), //输出路径，__dirname：当前文件所在路径
            filename: 'bundle.js' //输出文件
        },
        module: { 
            rules: [
                { 
                    test: /\.css$/,    //打包规则应用到以css结尾的文件上
                    use: ['style-loader','css-loader']
                }
            ]
        }
    }

5、命令行执行打包命令（在项目的根目录下即webpackdemo文件下）

webpack   #有黄色警告
    webpack --mode=development   #没有警告
    #执行后查看bundle.js里面包含了上面两个js文件的内容并进行了代码压缩

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e1b905649c0a4b91970c78d4744751fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201031165320398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2020103116555483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201031165928848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201031171038304.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201031232308636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201101223759309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201101224516711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbWVuZzE5ODg=,size_16,color_FFFFFF,t_70#pic_center