# webpack 專案打包技術

## 初始化
### 1. 先建立一個npm專案

mkdir webpack
cd webpack
npm init    //建立npm專案  
npm install -D webpack webpack-cli   //加入兩個套件

### 2. 新增webpack.config.js的設定檔

module.exports = { ...設定參數... }

## 設定
### mode：

mode: 'production'    //生產模式
mode: 'development'   //開發模式

### entry :
webpack打包的進入點，因為webpack默認只會打包js的部分，如果要打包其他的檔案，需要加入loader設定

entry: {
    index: './src/index.js',
}

### output：
打包後檔案放置的位置

output: {
    path: path.resolve(__dirname, '../dist/'),
    filename: 'js/[name].js'
 }

### optimize：
優化bundle，如果多個bundle打包都有相同的js，把它獨立出來，產生的地方，必須要在output那邊多加上chunkfilename

output: {
    ...
    chunkFilename: "chunk/[name].chunk.js"
},
optimization: {
    splitChunks: {
      cacheGroups: {
        global: {
          name: "global",
          test: /[\\/]global[\\/]/,
          chunks: "all",
          minChunks: 5,
          minSize: 30000,
        },
        commons: {
          name: "commons",
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          minChunks: 5,
          minSize: 30000,
        },
      }
    }
  },

### module：
設定各種loader

module: {
    rules: [  ...loader... ]
}

> loader寫法範例

{
    test:/\.css$/,      Regular的形式
    //配置方法
    use :{ loader:"style-loader" }         //物件寫法
    use :[ "style-loader" ]                //陣列寫法
    use :[ "style-loader","css-loader" ]   //兩個loader，是由右至左依序的loader開始執行
    use :[                                 //設定參數
        {
            loader:"url-loader",
            options:{
                limit : '1024'
            }
        }
     ]
     use :['url-loader?limit=1024&name=[path][name].[ext]']  //參數簡寫
}

style-loader 與 css-loader 打包 .css

{
    test: /\.css$/,
    use: [
      "style-loader",
      "css-loader?minimize"
    ]
}

url-loader打包照片，小於1024會直接轉成DataURl放入文件中，大於1024的會套用file-loader處理

{
    test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
    use: ['url-loader?limit=1024&name=[path][name].[ext]&outputPath=images/',]
}

### externals：
部會把這些package打包到bundle裡

externals: {
    jquery: 'jQuery'
  }

### resolve：
名稱簡化用

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    }
}

import vue from 'vue/dist/vue.esm.js'   //差別
import vue form 'vue'                   

### plugins插件：
用法

plugins: [ new 插件()  ]

webpack.ProvidePlugin可以匯入npm module js插件(全局使用)，就不需要再import或是require

plugins: [
    new webpack.ProvidePlugin({
      'swal': 'sweetalert2',
    })
]

如果要匯入第三方js(全局使用)，用別名取代後再匯入

resolve: {
    alias: {
      'Site': path.resolve(__dirname, '../main/assets/js/Site.js'),
  }
},
plugins: [
    new webpack.ProvidePlugin({
      'Site': 'Site',
    })
]

## 其他
如果使用 imagemin 在webpack 時發生錯誤，應該是系統缺少套件

brew install libpng    //mac上安裝 

sudo apt-get install libpng16-dev    //ubuntu 16.04上安裝