从0开发一个大玩具（二）

2020-07-02 本文已影响0人前端小旋风

搭建项目

在第一篇中选择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