node webpack4.6簡單配置

package.json

{
  "name": "his-web",
  "version": "0.0.0",
  "description": "HisWeb",
  "main": "app.js",
  "author": {
    "name": "york"
  },
  "devDependencies": {
    "@types/node": "^6.0.87",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-minifier": "^3.5.15",
    "html-webpack-plugin": "^3.2.0",
    "purify-css": "^1.2.6",
    "purifycss-webpack": "^0.7.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack-cli": "^2.0.15"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.0",
    "webpack": "^4.6.0"
  },
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }
}

webpack.config.js 的簡單配置

const path = require('path')
const webpack = require('webpack')
const glob = require('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const PurifyCssPlugin = require('purifycss-webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: "./script/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader"
            ]
        }, {
            test: /\.html$/,
            use: 'html-loader',
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                    }
                }
            ]
        }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new HtmlWebpackPlugin({
            hash: true,
            template: './page/index.html',
            minify: {
                removeAttributeQuotes: false, // 移除屬性的引號
            }
        }),
        new PurifyCssPlugin({
            paths: glob.sync(path.join(__dirname, 'page/*.html'))
        }),
    ]
}