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
    }