适合WEB开发初学者学习的“基于webpack5搭建html+css+js开发框架”

最新推荐文章于 2023-09-23 09:00:00 发布

ONEGISER(ZPC)

最新推荐文章于 2023-09-23 09:00:00 发布

阅读量180

点赞数

分类专栏： WEB软件开发文章标签： css node.js javascript

本文链接：https://blog.csdn.net/qq_19689967/article/details/120527153

版权

WEB软件开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

该博客介绍了如何利用Webpack5为初学者搭建一个基础的前端开发框架。创建了public文件夹及index.html，定义了package.json配置文件，并详细展示了webpack.config.js和webpack.config.release.js的配置，包括入口文件、输出设置、模块解析、插件等，以支持开发和生产环境的不同需求。

摘要由CSDN通过智能技术生成

前言

使用webpack5搭建适用于初学者学习的html+css+js的开发框架，代码见GITHUB。

创建public文件夹

创建index.html文件

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>web-frame</title>
<body style="margin:0px;">
    <div id="root" style="width:100%;height:100%"></div>
</body>
</html>

创建package.json文件

main为发布文件的入口
scripts为可执行的脚本

{
  "name": "web-frame",
  "version": "0.1.0",
  "description": "web-frame",
  "main": "dist/web-frame.js",
  "scripts": {
    "taobao": "npm install --registry https://registry.npm.taobao.org",
    "build": "node node_modules/webpack/bin/webpack.js --config  ./conf/webpack.config.js --mode=production",
    "release": "node node_modules/webpack/bin/webpack.js --config  ./conf/webpack.config.release.js",
    "webpack": "node node_modules/webpack/bin/webpack.js --config  ./conf/webpack.config.js --mode=development",
    "start": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js --config   ./conf/webpack.config.js --mode=development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ONEGISER/web-frame.git"
  },
  "dependencies": {
  },
  "keywords": [
    "html",
    "js",
    "css",
    "webpack5"
  ],
  "author": "ONEGISER",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ONEGISER/web-frame/issues"
  },
  "homepage": "https://github.com/ONEGISER/web-frame/issues#README",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "babel-loader": "^8.2.2",
    "mini-css-extract-plugin": "^2.3.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.2.1"
  }
}

创建conf文件夹

webpack.config.js
在开发或打包至生产环境时使用

const path = require('path');
module.exports = (env, argv) => {
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const { mode } = argv
    const isDev = mode === "development"
    const rootPath = "../build";
    const prodPlugins = [
        new CleanWebpackPlugin(),
    ]
    const publicPlugins = [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            minify: true,
        }),
        new MiniCssExtractPlugin()
    ]
    const plugins = isDev ? publicPlugins : publicPlugins.concat(prodPlugins)
    return [{
        mode,
        entry: './test/index.js',
        output: {
            path: path.resolve(__dirname, rootPath),
            filename: "[name].[chunkhash].js",
            chunkFilename: '[name].[chunkhash].js',
        },
        resolve: {
            extensions: [
                '.js',
                '.jsx',
                '.ts',
                '.tsx'
            ]
        },
        devServer: {
            static: {
                directory: path.join(__dirname, rootPath),
            },
            compress: true,
            port: 9000,
            hot: true
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader'],
                },
                {
                    test: /\.js$/,
                    use: [
                        {
                            loader: 'babel-loader',
                        }
                    ]
                }
            ]
        },
        plugins
    }]
};

webpack.config.release.js
发布成果，供第三方使用

const path = require('path');
const pkg = require('../package.json');

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const rootPath = "../dist";
const plugins = [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin()
]

module.exports = {
    mode: "production",
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, rootPath),
        filename: `${pkg.name}.js`,
        chunkFilename: '[name].[chunkhash].js',
        library: `${pkg.name}`,
        libraryTarget: "umd"
    },
    resolve: {
        extensions: [
            '.js',
            '.jsx',
            '.ts',
            '.tsx'
        ]
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                    }
                ]
            }
        ]
    },
    plugins
};

ONEGISER(ZPC)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
适合WEB开发初学者学习的“基于webpack5搭建html+css+js开发框架”

前言使用webpack5搭建适用于初学者学习的html+css+js的开发框架，代码见GITHUB。创建public文件夹创建index.html文件<!doctype html><html><head> <meta charset="UTF-8"> <title>web-frame</title><body style="margin:0px;"> <div id="root"
复制链接

扫一扫

专栏目录