前端模块化与Webpack

前端模块化是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 即可：

• 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

第二种：在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

Webpack

什么是Webpack

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

安装Webpack工具

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

初始化项目

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

const path = require("path") //Node.js内置模块
module.exports = {
    entry : './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname,'./dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

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

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

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

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文件的内容并进行了代码压缩