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`))
        }),
    ]
}