關於 webpack的總結

一 . 幾個基本的概念

1. mode開發模式

// webpack.production.config.js
module.exports = {
  mode: 'production'  // 生產模式 此時壓縮代碼等  development 爲開發模式 此時會開啓 sourseMap 
}

2. 入口文件(entry)

打包的起點 能夠是一個 固然也但是多個

module.exports = {
  entry: './path/to/my/enrty/file.js'
}

3. 輸出(output) 就是告訴webpack 在哪裏輸出它所建立的 bundles, 以及如何命名這些文件, 默認值爲 ./dist

const path = require('path')
module.exports = {
  entry: './path/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
}

4. loader webpack 自身只會處理js 因此處理css .vue 等文件就須要各自對應的 loader

// 先npm安裝 後使用
const path = require('path')
const config = {
  output: {
    filename: 'my-first.js'
  },
  module: {
    rules: [
      {test: /\.txt$/, use: 'raw-loader'}
    ]
  }
}
// 「嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析爲 '.txt' 的路徑」時，在你對它打包以前，先使用 raw-loader 轉換一下。」

5. 插件(plugins)

說明: loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

const HtmlWebpackPlugin = require('html-webpack-plugin') // npm安裝後 引用
const webpack = require('webpack')  // 用於訪問內置插件

const config = {
  module: {
    rules: [
      {test: /\.txt$/, 'raw-loader'}
    ],
    plugins: [
      new HtmlWebpackPlugin({template: './src/index.html'})
    ]
  }
}
module.exports = config

二. 入口起點(entry points)