WebPack

最新推荐文章于 2023-06-07 09:15:37 发布

大坤...

最新推荐文章于 2023-06-07 09:15:37 发布

阅读量508

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/red_HTML/article/details/127208046

版权

资源目录

下载依赖

在终端下载npm init -y 生成一个package . json

下载依赖

npm i webpack webpack-cli -D

启动webpack:

在输入开发模式： npx webpack ./src/main.js --mode=development

在输入生产模式： npx webpack ./src/main.js --mode=production

修改配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry: "./src/main.js",
    // 输出
    output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path: path.resolve(__dirname, "dist"),
        // filename: 输出文件名
        filename: "main.js",
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            }
        ],
    },
    // 插件
    plugins: [],
    // 模式
    mode: "development", // 开发模式
};

配置完成后我们可以使用 npx webpack 来运行

在创建的sum.js里面写

export default function sum(a, b) {
    return a + b
}

在通过main.js 来通过import 来引用sum.js里面的数据

import sum from './js/sum.js'
console.log(sum(1, 2));

创建index.html 里面创建基本html页面引入生成的dist 里面的main.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../../dist/main.js"></script>
    <h2>hello webpack</h2>
</body>

</html>

webpack中文文档

输入命令安装style css: npm install --save-dev style-loader css-loader

复制这一块对webpack.config.js 进行修改

写css样式

.box1 {
    width: 200px;
    height: 200px;
    background: red;
}

设置一个div一个盒子来引入 .box1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../../dist/main.js"></script>
    <h2>hello webpack</h2>
    <div class="box1">1</div>
</body>

</html>

在引入到main.js中

import sum from './js/sum.js'
console.log(sum(1, 2));

// css 
import './css/index.css'

最后显示如下