模块化、Webpack 快速上手

[Arcadian] 2021-01-25 13:08:50

分类专栏：前端知识文章标签： vue js nodejs javascript css

本文链接：https://blog.csdn.net/weixin_49343190/article/details/113108320

版权

一、模块化的使用

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) 运行结果
在这里插入图片描述

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文件
在这里插入图片描述

(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']
            }  
        ]  
    }
}