H5配置webpack

小赵很活泼

于 2024-11-20 21:26:48 发布

阅读量418

点赞数 4

文章标签： webpack 前端 node.js

本文链接：https://blog.youkuaiyun.com/id9426/article/details/143925539

版权

1. 初始化项目
首先，确保你已经安装了 Node.js 和 npm。然后，在你的项目目录中初始化一个新的 npm 项目：

npm init -y

2. 安装 Webpack 和相关插件
安装 Webpack 和 Webpack CLI：

npm install --save-dev webpack webpack-cli

安装 Babel 及相关插件（用于转译现代 JavaScript 代码）：

npm install --save-dev @babel/core @babel/preset-env babel-loader

安装 HTML Webpack Plugin（用于生成 HTML 文件）：

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

3. 创建 Webpack 配置文件
在项目根目录下创建一个 webpack.config.js 文件，并添加以下配置：

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

module.exports = {
    mode: 'development', // 设置为开发模式      // production 生产模式
    entry: './src/app.js', // 入口文件
    output: {
        filename: 'bundle.js', // 输出文件名
        path: path.resolve(__dirname, 'dist'), // 输出目录
        clean: true // 清理输出目录
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', // 模板文件
            filename: 'index.html' // 生成的文件名
        })
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist')
        },
        compress: true,
        port: 9000
    }
};

4. 创建项目结构
根据 Webpack 配置文件，创建以下目录结构：

your-project/
├── node_modules/
├── dist/
├── src/
│   ├── app.js
│   └── index.html
├── .babelrc
├── package.json
├── webpack.config.js
└── README.md

5. 编写前端代码
在 src 目录下创建 app.js 和 index.html 文件。

src/app.js

function aa() {
    console.log('app.js')
}

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aa</title>
</head>
<body>
    <button onclick="aa()">按钮</button>
</body>
<script src="./app.js"></script>
</html>

6. 配置 Babel
在项目根目录下创建一个 .babelrc 文件，配置 Babel：

{
    "presets": ["@babel/preset-env"]
}

7. 添加 npm 脚本
在 package.json 文件中添加以下脚本：

{
    "scripts": {
        "build": "webpack",
        "start": "webpack serve"
    }
}

8. 运行项目
安装所有依赖：

npm install

启动开发服务器：

npm start

构建生产版本：

npm run build

9. 项目结构总结
最终的项目结构应该是这样的：

your-project/
├── node_modules/
├── dist/
├── src/
│   ├── app.js
│   └── index.html
├── .babelrc
├── package.json
├── webpack.config.js
└── README.md