webpack常见用法（二）

path的区别和联系

• 主要说的是output中的path、publicPath和devServer中的path、publicPath的区别
  output->path :打包后静态文件的输出目录
  output->pubicPat :插入到模板（index.html）中的文件（路径：publicPath+filename）有可能是cdn等
  
  devServer->path :告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先
  devServer->publicPath :如果我们没有给它这个值，它就会去拼凑output中publicPath中的值，但如果在DevServer中设置了publicPath，那它就不会去管output中publicPath设置的值了默认值为’/’
  devServer中的publicPath和outPut中的publicPath对比->

webpack中处理js的兼容性(主要转译ES6/ES7/jsx)

安装依赖

• babel-loader 使用babel和webpack 转译js文件
• @babel/core babel编译的核心包
• @babel/preset-env 为每一个环境的预设 将高级语法转换为ES5
• @babel/preset-react react插件的babel预设
• @babel/plugin-proposal-decorators 把类和对象装饰器编译成ES5
• @babel/plugin-proposal-class-properties 转换静态类属性以及使用属性初始化语法声明的属性

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/polyfill -D

为什么安装了babel-loader还要安装env，babel-loader不包括这些么？

• babel-loader 是一个转换器,用来调用babelcore babelcore拿来babel-loader中传进来的代码，将代码解析成ES6语法树就完成了工作，接下来就要preset-env上场了，preset-env将ES6语法树转换成ES5语法树，然后bable-core在将ES5语法树转换成ES5语法
• 如果有更高级的语法不支持可以给预设配置插件，预设就是插件的一个集合,可以为预设配置插件（当编译语法时发生报错的情况可以根据提示安装对应的插件）
• 给预设配置参数，形式["@bable/preset-env",{…}]先将预设用括号包起来，后面的花括号即为预设的参数;其中的useBuiltIns为按需加载babel的插件执行是从下向上的
• corejs 是一个给低版本浏览器提供接口的库 如Promise、set、Map等

配置

{
    test:/\.jsx?$/,use:{
        loader:'babel-loader',
        options:{
            presets:{
                ["@bable/preset-env",{
                    useBuiltIns:'usage',//按需加载polyfill
                    corejs:{version:3},//制定corejs的版本号2或者3polyfill
                    target:{//指定要兼容哪些浏览器
                        chrome:'60',
                        firefox:'60',
                        ie:'9',
                        safari:'60',
                        edge:'17',
                    }
                }],// 可以转换js语法
                "@bable/preset-react", //可以转换jsx语法
            },
            plugins:[
                ['@babel/plugin-proposal-decorators',{legacy:true}]
                ['@babel/plugin-proposal-class-properties',{loose:true}]
            ]
        }
    }
}

• eslint 代码校验
• eslint
• eslint-loader
• configuring
• babel-eslint
• Rules

rules:[
    {
        test:/\.jsx?$/,
        loader:eslint-loader,//先进行代码校验然后在编译代码
        enforce:'pre',//先执行//强制制定顺序，pre之前 normal inline post
        options:{fix:true},//启动自动修复
        exclude:/node_modules/,//不需要检查的文件代码//黑名单
        //include:resolve(__dirname,'src')//只检查src目录里边的文件  白名单
    }
]

• eslint-config-airbnb 里面有更多的校验规则
  可以通过配置文件来配置自动修复
  .vscode->settings.json:

{
    "eslint.validata":{
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    },
    "editor.codeActionsOnSave":{//代码保存之后的动作
        "source.fixAll.eslint":true,//自动修复所有错误
    }
}

• 可以专门为eslint写一个配置文件 .eslintrc.js 常用配置如下:

export modules = {
    root:true,//跟配置文件
    parser:"babel-eslint",//解析器，把源代码转化成抽象语法树
    //指定解析器选项
    entends:airbnb,//
    parserOptions:{
        sourceType:"modules",
        ecmaVersion:2015,
    },
    //指定脚本运行环境
    env:{
        borwer:true,
    },
    //启用规则及其各自的错误级别
    rules:{
        "indent":"off",//缩进规则
        "quotes":"off",//引号类型
        "no-console":"error",//禁止使用console
    }
}

sourcemap 用来debug的一个工具文件 (devtool)

类型	含义
source-map	原始代码 最爱好的sourcemap质量，但会很慢
eval-source-map
cheap-module-eval-source-map
cheap-eval-source-map
eval
cheap-source-map
cheap-module-source-map
sourcemap

• 五个关键字的含义

类型	含义
eval	使用eval包裹模块代码（eval会缓存，下次打包速度更快）
source-map	产生.map文件
cheap	不包含列信息也不包含loader的sourcemap
module	包含loader的sourcemap（比如jsx to js,babel的sourcemap）否则无法定义源文件
inline	将.map作为dataUrl嵌入，不单独生成.map 文件

• 当使用hidden-source-map的时候由于打包后的代码中无法找到源文件的映射这样就保证了源文件的隐蔽性，调试时可以配置插件source-map-dev-tool-plugin（webpack内部插件直接用webpack调用）

new webpack.SourceMapDevToolPlugin({
    append:"//# sourceMappingURL=http://127.0.0.1/[url]",
    filename:"[file].map",
})