webpack3

path.resolve([from ...], to)
说明：将参数 to 位置的字符解析到一个绝对路径里。


参数说明


from 源路径
to 将被解析到绝对路径的字符串
__dirname变量获取当前模块文件所在目录的完整绝对路径。


关于webpack的学习:
    1.前端资源加载和打包工具
        1.安装nodeJS
        2.npm i webpack -g
        3.npm i webpack-cli -g
    2.使用的逻辑:
        webpack hello.js -o hello.bundle.js 
        为什么要是用这个  -o  呢,不是很理解
            将hello.js  ----->  bundle.js 
    3.实现的逻辑:
        index.js  使用script src 引入bundle.js
            show.js文件 引入str.js
            show.js  alert(require(./str.js))
            str.js  module.export='这是一段字符串'
        执行命令:
            webpack show.js -o str.js  就可以了
-----------------------------------------------
    样式的打包:
        需要安装loader的加载器
        npm i css-loader  style-loader   
        注释:
            css-loader:
                遍历css文件  找import
            style-loader
                在style的标签,里面找数据
        引入的方式:
            require("!style-loader!css-loader!./style.css")
            引入的先后顺序,是不可以修改的
            
    安装和打包的流程:
        1.初始化项目:
            npm init 
                -生成package.json文件
        2.安装css加载模块:
            npm install css-loader style-loader


        3.引入css文件
            在show.js文件夹里面
            require('!style-loader!css-loader!./style.css')
        4.重新进行编译    
    理解:
        bundle.js 里面包含各种文本格式的文件集合
        show 就是一个入口就文件
            里面引入各种css或者js资源
            之后,将show.js  的引用集合到bundle里面
-------------------------------------------
    配置文件:
        专有的文件名:
        webpack.config.js
        简单的代码:
            const path = require('path');


            module.exports={
                entry:'./src/js/show.js',
                output:{
                    path:path.resolve(__dirname, 'dist'),
                    filename:'bundle.js'
                },
                module:{
                    rules:[
                        {
                            test:/\.css$/,
                            loader:'style-loader!css-loader'
                        }
                    ]
                }
            }
        修改的位置:
            引入的css文件,不需要写加载器了
            require('../css/style.css')    直接引入就可以了
            
        注意需要看考官网,官网更新了一波 ---所以        
            loaders---->routers
        最后,执行webpack命令:
            每次修改都需要进行打包 --mmp (感觉体验不是很好的)
---------------------------------------------------------
    webpack安装第三方库 jQuery的安装            
        1.npm i jquery --save-dev    
        2.在中转文件里面  show.js   直接使用就可以了     
            var $=require('jquery')
            $(function () {
                $('#dv').html('这是一个jquery的语法').css({
                    backgroundColor:"yello"
                })
            })
                        
------------------------------------------------------------
服务端的环境安装:
    https://webpack.docschina.org/guides/development/#使用-webpack-dev-server
    webpack-dev-serve模块的安装    
    该模块可以将项目,打包到服务端,进行相关的配置    
        npm i webpack-dev-server --save-dev
        不管使用哪种,命令,都需要安装webpack-cli
            cnpm i webpack-cli   
    1.webpack.config.js 文件里面的相关配置
        module.exports={
            mode: 'development',
            devServer:{//配置此静态文件服务器，可以用来预览打包后项目
                contentBase:path.resolve(__dirname,'dist'),//开发服务运行时的文件根目录
                host:'localhost',//主机地址
                port:9090,//端口号
                compress:true//开发服务器是否启动gzip等压缩
            },
        }
    2.使用命令来执行:
        webpack-dev-server --mode development
    3.或者对这些命令进行封装:
        "start": "webpack-dev-server --entry ./src/js/show.js --output-filename ./dist/bundle.js",
        "dev": "webpack-dev-server --mode development"