隨著模組化開發的普及，專案功能需求不斷增加，Webpack已成為專案開發的標配，能夠大大提高你的開發效率，下面整理了關鍵的兩個檔案，還在優化中，僅供參考

{
  "name": "demo",
  "version": "1.0.0",
  "description": "this is a obj",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "author": "niko4"
 
,
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "cssnano"
 
: "^4.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "glob-all": "^3.1.0",
    "html-webpack-plugin": "^3.2.0",
    "imagemin": "^5.3.1",
    "imagemin-pngquant": "^5.1.0",
    "img-loader": "^3.0.0",
    "node-sass": "^4.9.3",
    "postcss": "^7.0.2",
    "postcss-cssnext"
 
: "^3.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-sprites": "^4.2.1",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "lodash": "^4.17.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

webpack.config.js

let path =  require('path')
let webpack = require('webpack')
const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");
let ExtractTextPlugin = require("extract-text-webpack-plugin");

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports={
    entry: {
        // page: './src/page.js'
        app: './app.js'
    },
    output: {
        publicPath: "./dist/",
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js'
    },
    resolve: {
        alias: {
          jQuery$: path.resolve(__dirname, "src/assets/js/jquery.min.js")
        }
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            },
            {
                test: /\.scss$/,
                // css處理為style標籤
                use: ExtractTextPlugin.extract({
                    // 對於不提取為單獨檔案的css樣式的loader
                    fallback: {
                      loader: "style-loader"
                    },
                    use: [
                      {
                        loader: "css-loader"
                      },
                      {
                        loader: "postcss-loader",
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')(),
                                require('postcss-sprites')({
                                    spritePath: './dist/sprite'
                                })
                            ]
                        }
                      },
                      {
                        loader: "sass-loader"
                      }
                    ]
                })
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                  {
                    loader: "url-loader",
                    options: {
                      name: "[name]-[hash:5].min.[ext]",
                      limit: 10000, // size <= 20KB
                      publicPath: "static/",
                      outputPath: "static/"
                    }
                  },
                  {
                    loader: "img-loader",
                    options: {
                      plugins: [
                        require("imagemin-pngquant")({
                          quality: "80"
                        })
                      ]
                    }
                  }
                ]
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin({
            filename: '[name].min.css',
            allChunks: false // 只包括初始化css, 不包括非同步載入的CSS
        }),
        new PurifyCSS({
            paths: glob.sync([
              // 要做CSS Tree Shaking的路徑檔案
              path.resolve(__dirname, "./*.html"),
              path.resolve(__dirname, "./src/*.js")
            ])
        }),
        new webpack.ProvidePlugin({
            jQuery: "jQuery" // 本地Js檔案
        }),
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./index.html",
            chunks: ["app"], // entry中的app入口才會被打包
            minify: {
              // 壓縮選項
              collapseWhitespace: true
            }
        })
    ]
    // optimization: {
    //     splitChunks: {
    //       cacheGroups: {
    //         // 注意: priority屬性
    //         // 其次: 打包業務中公共程式碼
    //         common: {
    //           name: "common",
    //           chunks: "all",
    //           minSize: 1,
    //           priority: 0
    //         },
    //         // 首先: 打包node_modules中的檔案
    //         vendor: {
    //           name: "vendor",
    //           test: /[\\/]node_modules[\\/]/,
    //           chunks: "all",
    //           priority: 10
    //           // enforce: true
    //         }
    //       }
    //     }
    // }
}

由於專案從3.10.1升級到webpack 4+，有一些官方廢棄的API，以上的一些配置請以官方文件為準，還在優化更新中