module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ],
  }

import '../scss/index.scss';

module.exports = {
  plugins: {
    autoprefixer: {
      // 加入各家瀏覽器的前綴詞
      overrideBrowserslist: [
        // 指定支援的瀏覽器版本
        'Chrome >= 52',
        'FireFox >= 44',
        'Safari >= 7',
        'Explorer >= 11',
        'last 2 Edge versions',
      ],
    },
  },
};

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

"browserslist": 
{
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "last 1 ie version"
  ]
}

module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ],
  }

devServer: {
  compress: true,
  port: 3000,
  stats: {
    assets: true,
    cached: false,
    chunkModules: false,
    chunkOrigins: false,
    chunks: false,
    colors: true,
    hash: false,
    modules: false,
    reasons: false,
    source: false,
    version: false,
    warnings: false
  },
},

stats: {
  // 加入資源訊息
  assets: true,
  
  // 加入建構日期和建構時間
  builtAt: true,
  
  // 加入暫存（但未建構）模塊的信息
  cached: true,
  
  // 顯示暫存的資源（設置為 false 則僅顯示輸出的文件）
  cachedAssets: true, 

  // 加入 children 訊息
  children: true,
  
  // 加入 chunk 訊息（設置為 false 能允許較少的冗长輸出）
  chunks: true,   
  
  // 將建構模塊信息加入到 chunk 信息
  chunkModules: true, 

  // 等同 webpack --colors
  colors: true,  
  
  // 通過對應的 bundle 顯示入口起點
  entrypoints: false,

  // 加入錯誤訊息
  errors: true,    
  
  // 加入 compilation 的 hash 
  hash: true,       
  
  // 設置要顯示的模塊的最大數量
  maxModules: 15,    
  
  // 加入建構模塊訊息
  modules: true,
  
  // 顯示警告/錯誤的依賴和來源（ webpack 2.5.0 開始 ）
  moduleTrace: true,  
  
  // 當文件大小超过 performance.maxAssetSize 顯示性能提示
  performance: true,  
  
  // 顯示模塊的輸出
  providedExports: false,

  // 加入 public path 的訊息 
  publicPath: true,    
  
  // 加入模塊被引入的原因
  reasons: true,  
  
  // 加入模塊的源码
  source: false,    
  
  // 顯示哪个模塊導出被用到
  usedExports: false, 
  
  // 加入 webpack 版本信息 
  version: true,  
  
  // 加入警告 
  warnings: true,       	 
}

"scripts": {
  "dev": "NODE_ENV=development webpack-dev-server --open"
},

module: {
    rules: [
      ...,
      {
        test: /\.(js)$/i,
        use: 'babel-loader'
      },
    ],
  }

{
  "presets": ["@babel/preset-env"]
}

export default function(a, b) {
  return a + b;
}

import '../index.html';
import '../scss/index.scss';
import Tool from './tool.js';

let arr = [1, 2, 3];

arr.map(item => "a" + item);

console.log(Tool(1, 2));