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

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

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

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
    }