webpack/全栈开发常用工具

webpack(全局安装)

    //webpack自身只有打包编译功能+插件可以实现打包,编译,测试等功能.
    安装：
        cnpm i -g webpack
    编写需要编译的文件
        //src/1.js代码
        import mod from './mod.js';//引入mod模块
        
        consloe.log(mod);
        //src/mod.js
       export default 12;//输出整体模块是12;
        //export 可以输出任意东西;export default class{};export default {a :12;b:5,fun(){xxx}}; export 与 import 可以在MDN查看详细使用文档
        //若export使用 export let a = 12;export let b = 5;不使用default,即不是输出模块,接收的JS就需要使用import {a,b as nb} from './mod.js';来接收属性;as为取别名
    编写配置文件：
        webpack.config.js //若不使用这个文件名,webpack编译时需要使用webpack --config XXX;XXX为任意自定义的文件名
        //代码
        module.exports ={
            entry:'./src/1.js',//需要编译的文件路径,配置文件沿用node规则,此处路径要加./,否则会被当做系统模块去查找
            output:{
                path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
                filename: 'bundle.js',//输出的文件名
            }
        }
        //webpack多入口,即多文件编译
        module.exports ={
            entry:{
                index:'./src/a',//编译a文件
                b:'./src/b'//编译b文件
            },
            output:{
                path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
                filename: '[name].bundle.js',//此处的name为entry中的键,会被编译为index.bundle.js与b.bundle.js两个文件
            }
        }
    使用webpack编译文件
    控制台输入webpack运行即可;因为全局安装之后即为安装cli,可以使用命令行了;

webpack(本地安装,启用webpack服务器webpack-dev-server)

webpack-dev-server(帮助开发的服务器,可以再服务器环境下测试页面等功能) webpack(功能模块) webpack-cli(命令行模块)

1. 安装 cnpm i webpack-dev-server webpack webpack-cli -D
2. 配置文件\ webpack.config.js
const Webpack = require('webpack');
    //代码
    module.exports ={
        entry:'./src/1.js',//需要编译的文件路径,配置文件沿用node规则,此处路径要加./,否则会被当做系统模块去查找
        output:{
            path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
            filename: 'bundle.js',//输出的文件名
        },
        mode:'development',//测试版,production为正式版
        // webpack-dev-server配置
        plugins:[
        //开启webpack的热加载模块,配合hot:true
        new Webpack.HotModuleReplacementPlugin()
        ]
        devServer:{
            contentBase:'static',//静态文件建议使用path模块下的绝对路径函数resolve('static/')
            port:8089,//运行端口
            hot:true,//开启热加载,需要配合webpack的HotModuleReplacementPlugin()函数使用,此时仅能使用js文件的自动刷新,静态文件需要在启动脚本命令中添加--watch
            historyApiFallback: true,//用来适应前台路由
        }
    }
3. 此时需要控制台输入webpack-dev-server --inline --watch来启动服务器,编译后的文件存在内存中(或者是dev-server默认将文件编译在根目录),html文件引用时直接使用编译后的文件名即可(bundle.js),--inline为加载刷新时刷新整个页面,--watch为监听静态页面自动刷新

webpack使用loader(俗称:加载器,装载器)

babel-loader用来编译es6 安装 babel-loader(给webpack提供接口) babel-core(真正的功能代码) babel-preset-env(环境预设)

    module.exports ={
        entry:{
            index:'./src/a',//编译a文件使用loader可以不写后缀名,
            b:'./src/b'//编译b文件
        },
        output:{
            path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
            filename: '[name].bundle.js',//此处的name为entry中的键,会被编译为index.bundle.js与b.bundle.js两个文件
        },
        module:{//所有使用loader的配置都在module中配置
            rules:[
                {
                    test:/\.js$/,//以js结尾的文件
                    exclude:/node_modules/,//需要排除的js文件，node_modules文件夹下的js文件
                    use:{
                        loader:'babel-loader',//使用babel-loader
                        options:{
                            presets:['env']//配置使用环境预设
                        }
                    }
                }
            ]
        }
    }
    //此处可以完成编译,但是无法使用,坐等后续学习,

css-loader用来编译css\less\sass等 安装 css-loader

    //创建css文件,直接在css.js中可以引用该文件 import cs1 from './cs1.css'
    //webpack配置文件中，编译css.js文件即可,文件中cs1即为css文件中的代码
    // module如下
        module:{//所有使用loader的配置都在module中配置
            rules:[
                {
                    test:/\.css$/,//以css结尾的文件,如果是less等,需要改成对应的后缀名
                    use:{
                        loader:'css-loader',//使用css-loader
                        options:{
                            presets:['env']//配置使用环境预设
                        }
                    }
                }
            ]
        }

扩展

爬虫如果需要传参的时候,根据访问方法get直接在网址后面?传参,post直接使用write('{"xxx":"xxx"}');

全栈开发常用工具
1. 编译类
    babel      --> ES6编译成ES5
    grunt\gulp --> 压缩等功能
2. 打包类
    browserify --> 一堆文件打包成单个文件
3. 开发辅助
    brower-sync --> 多端同步,移动端在线测试使用
4. 测试类
    单元测试 --> 对模块、函数进行测试
    集成测试 --> 对项目进行测试
    压力测试 --> 测试项目性能、负载能力、与隐藏BUG
webpack + 插件 处理以上全部问题;

npm 命令 -g与-D的使用
-g为全局安装,安装的是命令行,即 webpack-cli
-D为本地安装,安装的是webpack文件包