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
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。