搭建项目

在第一篇中选择webpack作为构建工具

新建文件夹css-creator

mkdir css-creator 
cd mkdir css-creator
npm init

terminal result

输入yes后
生成了package.json文件

package.json

开始配置webpack

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

webpack4 需要安装webpack-cli
webpack-dev-server 是用来启动服务，热加载跨域代理等
html-webpack-plugin 是加载index.html用的

安装成功

package.json

创建webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, './src/app.js'),
    devServer: {
        port: 8088,
        hot: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./index.html",
        }),
    ],
}

配置中 HtmlWebpackPlugin调用了一个index.html 那咱们也创建一个html

创建html

在package.json中增加scripts配置启动命令

package.json
用命令行启动项目
npm run dev
浏览器 命令行
仔细观察命令行发现有个报错，原来是webpack.config.js中的entry 字段，填写的app.js但是却没有创建app.js文件
增加src目录和 src/app.js
image.png
！！！增加文件后需要重启项目 image.png

页面已经显示正确啦

webpack构建的项目就已经搭建完成了
接下来会一点一点完善webpack的配置

此致
敬礼~
小旋风

我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243