webpack安装

  npm install webpack webpack-cli --save-dev
// webpack4需要安装webpack脚手架(webpack-cli)才可以使用

webpack打包css 安装style-loader css-loader

npm install style-loader css-loader --save-dev
// 4.0以后需要安装mini-css-extract-plugin
npm install mini-css-extract-plugin --save-dev
npm install css-minimizer-webpack-plugin --save-dev

webpack打包html安装 html-webpack-plugin

npm install html-webpack-plugin --save-dev

例子

const path = require("path")
// 压缩css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 打包css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 打包html
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports = {
    module: "development",
    entry: {
        index: ['./src/js/index.js']
    },
    output: {
        path: path.resolve(__dirname, "./dist/"),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [new CssMinimizerPlugin()],
      },
    plugins: [
        // 打包html
        new htmlWebpackPlugin({
            template:"./index.html",
            filename:path.resolve(__dirname,"./dist/index.html")
        }),
        //可以打包在一个文件夹内
        new MiniCssExtractPlugin({
            filename:"/css/index.css"
        }),
    ]
}

执行

npm run build
// 注意 需要看package.json里面有没有

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},