從零開始webpack4基礎配置

首先看一些核心概念：

1.Entry 從 webpack4 開始，再也不必須定義 entry point(入口點) ：它將默認爲 ./src/index.js。

2.Output 輸出屬性規定哪裏建立以及如何命名輸出文件。默認./dist/main.js爲主輸出文件和./dist任何其餘生成文件的文件夾。

3.Loaders 使用加載器來預處理文件。（如babel-loader、css-loader）

4.Plugins 插件利用webpack的編譯過程執行一些任務，如優化、環境變量配置

5.Mode 經過設定mode參數設置爲development，production或者none。啓用對應於每一個環境的WebPack內置的優化。

6.Browser Compatibility webpack支持全部符合ES5標準的瀏覽器（不支持IE8及如下版本）。若是要支持舊版瀏覽器，則須要加載polyfill以支持一些新的語法。

使用init初始化 package.json。

npm init -y

安裝webpack、 webpack-cli 模塊

npm i webpack --save-dev

在src目錄下新建index.js做爲入口文件。此時運行npm run build會發現已經有了dist目錄。
此時雖然輸出了 ./dist/main.js，可是控制檯提醒'mode'使用哪一種模式（production(生產) 和 development(開發) 模式。）。

webpack.config.js

module.exports = {
  entry: './src/index.js' //須要打包的文件入口
};

開箱即用，webpack不須要您使用配置文件。可是，它將假定您的項目的入口點爲src/index並將結果dist/main.js縮小並優化生產。

使用webpack編譯的代碼中可用的全部方法。使用webpack捆綁應用程序時，您能夠選擇各類模塊語法樣式，包括ES6，CommonJS和AMD，推薦使用ES6。

//3種模塊化規範
//AMD
define(function() {
    return function(a, b) {
        return a + b
    }
})
require(['./module/amd'], function(amd) {
    console.log(amd(1, 2))
})

//commonJS
module.exports = function(a, b) {
    return a + b
}
let common = require('./module/common')
console.log(common(1, 2))


//ES6
export default function(a, b) {
    return a + b
}
import es6 from './module/es6'
console.log(es6(1, 2))

webpack.config.js

const path = require('path')

const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: './app.js' // 須要打包的文件入口
  },
  output: {
    publicPath: __dirname + '/dist/', // js 引用的路徑或者 CDN 地址
    path: path.resolve(__dirname, 'dist'), // 打包文件目錄
    filename: 'bundle.js' // 打包後的 js 文件
  },
  rules: [
    {
      test: /\.js$/, // 使用正則來匹配 js 文件
      exclude: /node_modules/, // 排除依賴包文件夾
      use: {
        loader: 'babel-loader' // 使用 babel-loader
      }
    }
  ],
  "browserslist": [
    "> 1%",
    "last 2 version",
    "not ie <= 8"
  ],
  plugins: [
    new CleanWebpackPlugin(), // 默認狀況下，此插件將刪除 webpack output.path目錄中的全部文件，以及每次成功重建後全部未使用的 webpack 資產。
    new HtmlWebpackPlugin({
      // 打包輸出HTML
      title: '自動生成 HTML',
      minify: {
        // 壓縮 HTML 文件
        removeComments: true, // 移除 HTML 中的註釋
        collapseWhitespace: true, // 刪除空白符與換行符
        minifyCSS: true // 壓縮內聯 css
      },
      filename: 'index.html', // 生成後的文件名
      template: 'index.html' // 根據此模版生成 HTML 文件
    })
  ]
}

參考連接：webpack指南
參考連接：實例帶你入門並掌握Webpack4