1、初始化一个npm项目

    npm i -y

    2、安装webpack，4.0以上装webpack-cli

    npm i webpack webpack-cli -D

    3、改package.json里的scripts:
    image.png

    4、当然是要建一个webpack.config.js的配置文件啦

    image.png

    5、创建该创建的dist(打包出来在这里，所以这里面是空的)和src(源，平时写在这里)文件夹

    应该的文件夹结构如下：
    image.png

    6、开始打包js文件，因为webpack最开始就是为了打包JS而出来的，这是最基本的功能（只要看红框内内容）

    image.png

    7、开始打包html内容

    装插件 npm i html-webpack-plugin -D

    然后

    image.png

    8、打包CSS

    踩过坑了 webpack4.0以上的 用mini-css-extract-plugin

    4.0以前的用extract-text-webpack-plugin

    npm i mini-css-extract-plugin -D

    配置如下：

    image.png

    然后发现，还得在入口文件里有引用

    image.png

    这些配置完以后

    npm run webpack 试试吧

    看看能不能找到快乐

    另外，发现我现在多个源css都一起打包到了同一个css文件了，暂时还不知道怎么分别打包成不同的css文件。