webpack基础入门

wenpack的实战
webpack的使用: 
    作用:    
        1.模块化
        2.自定义的文件或者是npm install 安装的文件
        3.静态文件的模块化 --需要借助插件和加载器
    优势:
        代码分离
        装载器
            装载和解析 css sass less jsx文件等
        智能解析
            require(... .ejs)
    如何安装:
        1.cnpm install -g webpack (安装webpack)
        2.cnpm install webpack -dev-server (安装可以实时监控的服务器)
=======================================
1.整体的理解
    app.js 我的随便的一个文件
    我不直接的引入到index.js文件里面
        而是将他打包,和其他需要引入的文件一样,
        统一引入到bundle.js文件里面
    下面是步骤:
        1.新建一个文件夹(存放你的工程目录)
        2.使用命令进行初始化
            cnpm init (npm当然也是可以的)
        3.在index.html引入bundle.js文件(其他的引入文件都在这个文件里面)
            index.html 是展示页面
            只需引入一个文件----bundle.js就可以了
            其他的文件,在bundle.js里面进行引入
        4.执行打包的命令:
            单个的文件打包:
                webpack app.js bundle.js
                把app.js文件打包为bundle.js文件输出
                需要打包的文件,一级路径不需要export
                    直接可以使用
            多个文件的打包:(感觉和nodeJS类似)
                一级文件 需要require()导入之后的,下级文件
                    下级文件,也是需要导出文件信息的
                    使用module.exports {  }  //导出了,才可以共享啊
                webpack app.js bundle.js --watch
                热加载--一直在监听
==============================================
2.引入第三方的库
    以安装jQUery 库为例,来学习一下
        cnpm i jQuert --save
        (我好像忘了 --save和--save-dev的区别-->开发依赖和生产依赖的关系)
        安装步骤:
            1.cnpm i 安装包  
                cnpm i jquery --save
            2.在app.js文件里面进行导入
                let $=require("jquery");
            3.在之后,直接使用即可
                $("body").css({
                    background:'red'
                })
            疑问:(是否可以继承呢??)
                上级文件使用了jQuery
                导入的下级文件,可以直接使用jquery吗??
                    之后再做测试(vue是可以的--其他的不知道)
===========================
3.使用css的loader(加载器)
    1.安装包:
        cnpm i css-loader style-loader --save-dev (好像是开发环境依赖)
    2.引入css的文件,在app.js文件里面(一级文件目录)
        静态文件的引入是不一样的(修饰比较容易忘掉)前面是需要修饰的
            require("!style-loader!css-loader!./style.css");
            引入style.css 文件的方式
    其实,这种方式不够简单        
     
===========================================
4.优化的写法:
    使用配置文件 webpack.config.js(我放在了根目录的下面了--不知道路径是否有讲究)
    基础的配置代码:
        module.exports={
        //入口文件
        entry:'./src/js/app.js',
        //出口文件
        output:{
            //当前的文件夹下面,创建dist文件夹 下面创建bundle.js文件.作为出口
            path:__dirname+"/dist",  //路径,--dirname表示当前的路径
            filename:"bundle.js" //出口的文件名(随便起)
        },
        //依赖的插件或者装载器
        module:{
            loaders:[
                {
                    test:/\.css$/,  //匹配文件
                    loader:"style-loader!css-loader",  //匹配到的文件,需要使用到了加载器
                }
            ]
        }
    再次之后,如何使用css样式文件呢??
        require("../css/style.css");
        直接引入,不需要前面加后缀了(世界如此简单)
    最后,别忘了编译一下:
        直接 webpack命令 
        后面都不需要写了,你都在配置文件里面写好了呀
====================================================
5.小技巧
    如何看别人给自己代码设置的快捷方式(当然,可以自己设置自己的快捷方式)
    在package.json文件里面
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build":"webpack"
    },
    所谓的快捷方式:
        就是,命令的代替  
        上文,使用了 cnpm run build 来代替命令 webpack 命令
        这,就是快捷方式
    注意:
        这里需要使用 cnpm build (你自己定义的命令名称)
========================================================
6.建立本地的服务器
    使项目可以直接在本地的服务器上运行
    安装命令:
        cnpm i webpack-dev-server -g --save-dev 
        安装到全局,并且安装到当前的项目中(开发环境)
    在package.json里面,在给一个快捷方式
         "scripts": {
            "start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "webpack"
          },
        当我们运行:
            cnpm run start的时候
            就会,运行之后的一连串命令()
        命令的参数分析:
            webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js
            入口文件:    ./src/js/app.js
            出口文件名: ./dist/bundle.js(如果没有dist文件夹,是可以自己创建的)
                
    执行步骤:
        1.安装包
        2.进行相关的配置
        3.执行你自定义的命令
            cnpm run build  (构建包)
            cnpm run start (打开服务器)
    注意:
        这个服务器也是实时监听的---为什么要用也???
        --watch
==============================================================
7.babel的使用和配置
    这才是重点(终于,来了)
    一切都是为了ES6啊
    关于babel的故事(babel是辨别的意思)
        巴别塔:
            巴别塔;是《圣经·旧约·创世记》第11章记载,
            当时人类联合起来兴建希望能通往天堂的高塔;
            为了阻止人类的计划,上帝让人类说不同的语言,使人类相互之间不能沟通,
            计划因此失败,人类自此各散东西。
            此事件,为世上出现不同语言和种族提供解释。
    使用的具体步骤:
        1.安装包
            cnpm i babel-core babel-loader babel-preset-es2015 --save-dev
            如果,需要编译babel-preset-react 大概也是这么个写法吧
        2.在webpack.config.js文件里面进行配置
            {
                test:/\.js$/,
                exclude:/node_modules/,  //module模块文件太多了,排除掉就好了
                loader:"babel-loader",
                query:{ //查询预编译的内容
                    presets:["es2015"]
                }
            }
            为了减少工作量,需要去掉node-modules文件夹下面的内容,所以需要排除的
            
            
        
        
        
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值