webpack的理解

什么是webpack?

        模块化打包机。

 

作用：

1、将浏览器不识别的语言转换成浏览器识别的语言 (sass Typescript .vue.....)

2、搭建服务器

3、语法检验

4 压缩 合并 ......

 

webpack的工作流程：

1、通过一个入口文件 找到所以依赖的文件 通过loader进行打包 转换一个或者多个js文件

 

webpack和gulp的区别

　　webpack是一个模块打包机

　　gulp前端自动化工具

 

项目如何搭建：

    （纯手工搭建）

        1、src：开发阶段

        2、dist：部署阶段

        3、node_modules：安装的依赖

        4、webpack.config.js：配置文件

        5、package.json：当前所依赖文件的配置信息

 

1、全局安装webpack

cnpm install webpack@3.5.3 -g

 

2、创建文件 初始化文件

npm init -y

 

3、局部安装wenbapack

cnpm install webpack@3.5.3 --save-dev;

 

4、创建src dist webpack.config.js

 

5、在src文件夹里面写一个入口文件 index.js

 

6、处理js需要安装的第三方包

cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

 

7、处理css所需要的loader

cnpm install --save-dev style-loader css-loader sass-loader node-sass

 

 

8、插件

html-webpack-plugin

 

cnpm install html-webpack-plugin --save-dev

 

 

9、服务器

cnpm install webpack-dev-server@2 -g

 

在package.json里的script里配置：

"dev":"webpack-dev-server --open",

 

10、webpack.config.js配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

//定义了出口文件路径和入口文件路径
const PATH = {
    app:path.join(__dirname,"./src/index.js"),
    build:path.join(__dirname,"./dist")
}

//webpack的配置
module.exports = {
    entry:{
        app:PATH.app
    },
    output:{
        //entry的key值是什么name就是什么
        filename:"[name].js",
        path:PATH.build
    },
    //以下处理模块使用的一些loader
    module:{
        rules:[
            {
                test:/.(js)$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env","@babel/react"]
                    }
                 }
            },
            {
                test:/.(css|scss)$/,
                use:["style-loader","css-loader","sass-loader"]

            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./index.html",
            title:"姗姗",
            arr:["黄晶晶","宋飒","马蕊","孙腾飞"]
        }),
    ]
}

11、柯里化函数

        柯里化是把接受多个参数的函数变换成接受一个单一参数的函数。

function add(a,b){
    return a+b;
}
console.log(add(2,3))
function add(a){
    return function(b){
        return function(c){
            return a+b+c
        }
    }
}
console.log(add(2)(3)(4))

 

 

 

12、惰性函数（由科里化函数衍生出来的）

function getStyle(obj,attr){
    if(obj.currenStyle){
        getStyle = function(obj,attr){
            return obj.currenStyle[attr]
        }
    }else{
        getStyle = function(obj,attr){
            return getComputedStyle(obj,false)[attr]
        }
    }
        return getStyle(obj,attr)
    }
var oBox = document.getElementById("box");
console.log(getStyle)
getStyle(oBox,"width");
console.log(getStyle)