# Webpack

學習資料：https://neighborhood999.github.io/webpack-tutorial-gitbook/
學習影片：https://www.youtube.com/watch?v=IZGNcSuwBZs&t=2098s

### 安裝
npm init
npm install webpack webpack-cli
此時package.json的dependencies就會出現webpack
scripts要新增一個build
"scripts": {
"build": "webpack --config prod.config.js"
}
新增webpack.config.js設定檔
webpack.config.prod.js

#### 範例註解(可依照需求區分prod dev設定檔)

const path = require('path');
module.exports = {
    mode:'dev'
    entry: path.resolve(__dirname, 'src/index.js'),//編譯前檔案的檔名
    output: {//output - 宣告 webpack 輸出的形式。
        path:path.resolve(__dirname, 'dist'),//存放 bundle 檔案的位置。
        filename: 'bundle.js',//檔案名稱
    }
    module: {
    loaders: [{
      test: /\.scss$/,//一個正規表達式，用來找出要套用 loader 的檔案。
      loaders: ['style', 'css','sass']//指定哪些 loader 是用於匹配前述 test （正規表達式）的檔案。
    }]
  }
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })//指定了一個搭配 ./src/index.html template 的 HtmlWebpackPlugin，它會產生一個檔案叫做 index.html 在我們的 dist 資料夾，而網頁的內容是 ./src/index.html。


  ],
}

// webpack.config.dev.js
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'cheap-eval-source-map',
    //source map 就是儲存了原始碼與編譯後程式碼的對應關係之檔案，讓你在開啟 Devtool 時，能讓瀏覽器透過載入 source map 的方式幫助你定位原始碼位置，方便除錯。
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index'
  ],//兩個新的進入點將伺服器連結到瀏覽器
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  },
  devServer: {
    contentBase: './dist',//服務的檔案來自哪裡。
    hot: true//是否啟用Hot Module Replacement
      //port open...還有其他設定可以增加
  }
}