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
    }