webpack各设置详解

devtool: 设置一些开辟环境的提醒东西

比方: devtool: ‘cheap-module-eval-source-map’ 当项目中报错能够正确的定位到哪一个文件报错

对照项构建速率从新构建速率代码提醒定位
cheap-module-eval-source-map+++原始源代码
eval++++++webpack天生后的代码

可根据场景运用这两个值调试代码

alias: 项目中设置引入文件的快速途径

 webpack.config.js中导出的alias对象内设置   key ——> 快速方式名   value ——> 对应的途径
 如要设置web -> page这个文件夹的快速方式    page: 'app/web/page'

dll: 引入一些不会常常更新的第三方库,只需其包括的库没有增减、晋级, 线上的dll代码不会跟着版本宣布频仍更新,不须要从新打包

dll: ['vue', 'axios'] 如许运用即可

loaders: 设置一些项目须要运用自动转换的语法

比方: typescript: true ==> 项目中能够运用ts

  • 或许:
    scss: {
        options: {
            includePaths: [path.resolve(_dirname, 'app/web/asset'), path.resolve(_dirname, 'app/web/asset/style')],
        },
      }

能够转换静态资本asset下的scss文件

  • 另一种写法:
    {
        test:/\.css$/,
        loader: 'style!css'
    }
  • 这里面的!用以webpack处置惩罚css文件时运用css-loader兼style-loader
    !加了以后文件处置惩罚是自右向左,即先运用css-loader然后举行style-loader处置惩罚
  • url-loader可将图片转换成base64编码

plugin: 运用一些插件完成一些功用

比方: CommonsChunkPlugin 提取块之间同享的大众模块

performance: 设置一些机能监测

比方: key ——> hints value ——> “warning”
将展现一条正告,关照你这是体积大的资本

webpack中 devServer选项改项目运转端口

    devServer: {
        host: '127.0.0.1',
        port: 3000
    }
    原文作者:our_sky
    原文地址: https://segmentfault.com/a/1190000016252189
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞