webpack相關筆記

url：C:\Users\27509\Desktop\kaikeba\demo_webpack
工具：
1.編譯類-babel
    es6->es5
2.打包-browserify
    一堆文件->單個文件
3.開發輔助-browser-sync
    多端同步
4.測試類
    單元測試:模塊，函數
    集成測試
    壓力測試：性能，負載能力，隱藏bug

webpack+插件
打包，編譯，測試，調試

編寫配置
    默認：webpack.config.js
    修改：
    
    
es6模塊化
    export default xxx //作爲模塊本身被輸出  import xxx from "..."
    export let a=1,b=2 //輸出模塊的東西      import {a,b} from "..."
    
webpack基本配置
    module.exports={
        extry:"文件名",
        output:{
            path:"結果目錄",
            filename:"結果文件名"
        }
    }

單入口
entry:"入口文件地址"    
    
多入口
entry:{
    名字:"入口文件地址",
    ...
}
output:{
    path:xxx,
    filename:"...[name]..."
}

dev-server
1.安裝
    cnpm i webpack webpack-cli webpack-dev-server -D

webpack-cli  命令行工具
npm i -g webpack

webpack  庫
npm i webpack

devserver
開發服務器

loader-翻譯
    babel-loader
        1.babel-loader                給webpack用的
        1.babel-core                    babel核心庫
        1.babel-preset-env        環境預設
        
        
    cnpm i babel-loader babel-core babel-parset-env -D

百分之90的loader
module:{
    rules:[
        {
            test:正則,
            use:loader
        }
    ]
}

1.打包-》配置
2.devserver
3.各種loader

resolve:{//一般只認js  如果需要其他的可以添加其他語言後綴
    extensions:[".ts",".tsx"]
}