模块化、Webpack 快速上手

水深无声 2023-01-10 14:58 128阅读 0赞

# 一、模块化的使用 #

## 1. 概念 ##

前端中js文件与js文件的相互调用称为模块化

## 2. ES5实现模块化 ##

(1) 创建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
    }

(2) 创建02.js文件(调用者)

//1. 引入01.js文件
    const m = require('./01.js')
    
    //2. 调用
    console.log(m.sum(1,2))
    console.log(m.subtract(10,3))

(3) 运行结果  
![在这里插入图片描述][20210125130730292.png]

## 3. ES6实现模块化方式一 ##

注：ES6的模块化在node.js环境无法运行，需要使用bable先转换成ES5代码

(1) 创建01.js文件

//定义方法，使用export关键字设置方法可以被其他js调用
    export function getList() { 
        console.log('getList............')
    }

(2) 创建02.js文件

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

(3) 需要将上述两个文件先转换成ES5格式再运行

## 4. ES6实现模块化方式二 ##

(1) 创建01.js文件

//定义哪些方法可以被其他js调用
    export default { 
        getList() { 
            console.log('getList.....')
        } //多个使用逗号隔开
    }

(2) 创建02.js文件

//引入01.js文件，创建对象进行调用
    import m from './01.js'
    
    //调用方法
    m.getList()

(3) 需要将上述两个文件先转换成ES5格式再运行

# 二、Webpack的使用 #

## 1. 概念 ##

Webpack是一个前端资源的下载、打包工具，可以将多个js、css等静态资源打包成为一个静态 资源文件，减少了页面的请求数量

## 2. 使用 ##

(1) 使用指令`npm install -g webpack webpack-cli`安装Webpack工具

(2) 使用指令`npm install --save-dev style-loader css-loader`使得可以打包css文件

(3) 创建需要的资源，在main.js文件引入common.js、utils.js、style.css文件  
![在这里插入图片描述][20210125130830463.png]

(4) 创建webpack.config.js文件，内容如下

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

(5) 创建dist文件夹，存放打包后的文件

(6) 执行指令`webpack --mode=development` 或 `webpack`完成打包

[20210125130730292.png]: /images/20221119/4bf4c578c3e2461babbadb61d5d9344c.png
[20210125130830463.png]: /images/20221119/e113840d93a54102b0be3166f97bf522.png