Webpack:入门小demo

最新推荐文章于 2023-07-26 11:57:21 发布
最新推荐文章于 2023-07-26 11:57:21 发布
阅读量161 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44599809/article/details/97813898
版权
本文详细介绍了Webpack的基础配置和使用，包括安装、初始化项目、配置Webpack、使用loaders（如babel-loader和css-loader）以及插件（如HtmlWebpackPlugin和mini-css-extract-plugin）。通过实践操作，演示了如何将JS、CSS和资源文件打包，并实现文件的分离，适合Webpack初学者参考。
摘要由CSDN通过智能技术生成

本文主要是记录webpack的简单入门操作，希望对刚入门的t同行有所帮助。
第一步：安装webpack；

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
//webpack4还需要安装webpac-cli
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server

第二步：开始前准备；
新建一个文件夹，命名不能是webpack，我命名的是webpack_demo；然后打开cmd，初始化项目：npm init;完成后,文件夹内新建如下文件：
在这里插入图片描述
webpack.config.js的内容为：

module.exports = {
    entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "js/bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        // contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    }
}

index.html的内容为：

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

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

<body>
    <div id="root"></div>
    <script src="js/bundle.js"></script>
</body>

</html>

public/index.js的内容为：

var header = require('./header')
var content = require('./content')
var footer = require('./footer')
document.getElementById('root').innerHTML = header + content + footer

public/footer.js,header.js,content.js的内容为：

module.exports = '<header>这是头部</header>'
module.exports = '<div class="content">这是正文</div>'
module.exports = '<footer>这是脚部</footer>'

第三步：尝试打包
在package.json文件中配置，如下：
在这里插入图片描述
在cmd输入，npm run server,成功打开浏览器;运行npm start,查看dist文件夹下是否有文件，有则打包成功。

第四步：使用loaders,Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
一般常用的是进行js版本转译，css加载，图片加载等。

babel-loader

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

在webpack.config.js中配置Babel的方法如下:

module.exports = {
    entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "js/bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        // contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "env"
                    ]
                }
            },
            exclude: /node_modules/
        }]
    }
}

css-loader

npm install --save-dev style-loader css-loader

module.exports = {
    entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "js/bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        // contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    },
    module: {
        rules: [{
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }]
            }
        ]
    }
}

npm run server查看打包效果，css和js是打包在一个js文件中。

插件（Plugins） ：插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续上面的例子。
HtmlWebpackPlugin：这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
安装：

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

	1.public文件夹下创建一个index.html文件，和根目录下的index.html内容相同，只是不引入js;
	2.webpack配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack")
module.exports = {
    entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "js/bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        // contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    },
    module: {
        rules: [{
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/public/index.html" //new 一个这个插件的实例，并传入相关的参数
        })
    ],
}

npm start可以看到dist文件夹下生成index.html；但是你可以看到css和js是打包至一个js文件中，这是不利于我们的代码维护的，因此需要将css和JS分离。

使用mini-css-extract-plugin：
安装

npm install mini-css-extract-plugin --save-dev

webpack.config.js内容：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const webpack = require("webpack")
module.exports = {
    entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "js/bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        // contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    },
    module: {
        rules: [{
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/public/index.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[id].css"
        })
    ],
}

npm start打包完，即可以看到打包出来的dist文件夹下js和css分离开来。

以上只是loader只是部分操作事例，还有关于url-loader,vue-loader等等。

爱狗的陈十七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【webpack】入门Demo
Doris_rain的博客
09-12 1535
概述 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 web
webpack-demo:webpack-demo入门
03-27
我在学习时的笔记以下是我在学习Webpack时的注意事项package.json 项目命令npm run buildnpm start图书馆使用webpack-dev-middleware 我们还将在我们的服务器脚本中使用publicPath，以确保在上正确提供文件。...
webpack_demo:Webpack，演示
05-13
#webpack_demo 用于学习的webpack演示，通过该项目，您可以知道如何使用webpack来构建项目； 运行方法 $cnpm install $cnpm run build 添加代码拆分
webpack-demo
在无知中学习，在学习中成长，在成长中学习
03-30 1332
webpack基本使用 第一步： 1.初始化项目 npm init 2.安装依赖包(-D 开发环境 -S 生产环境) npm install webpack webpack-cli -D 3.创建webpack.config.js配置文件 "build": "webpack --config webpack.config.js" 配置webpack配置 运行webpack配置，进行打包 npm run build 4.配置entry入口文件，output出口文件以及m
第2集丨webpack 江湖 —— 创建一个简单的webpack工程demo
最新发布
秋堂主的博客
07-26 1577
纸上得来终觉浅，绝知此事要躬行。此次目标是：创建一个简单的webpack工程demo，来理解webpack的运行机制。`webpack` 是一个用于现代 `JavaScript` 应用程序的 静态模块打包工具。当 `webpack` 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(`dependency graph`)，然后将你项目中所需的每一个模块组合成一个或多个 `bundles`，它们均为静态资源，用于展示你的内容。
webpack demo
qq_42708127的博客
04-09 499
1.进入命令行，创建文件夹mkdir webpackdemo，进入文件夹cd webpackdemo 2.对项目进行初始化（npm init），目的是为了生成package.json文件。ps：一路回车即可，内容后面也可修改 3.安装webpack之前查看node是否安装 node -v，webpack安装分为全局安装（npm install webpack -g）和局部安装（npm ins...
webpack demo 讲解
灯塔的CSDN博客
08-11 1069
在学习webpack时，笔者假设你已经对nodeJS有一定熟悉程度。并且你在你的机器上已经安装了nodeJS webpack Demo01 我们新建一个文件夹叫demo01 mkdir demo01 在demo01中，建立webpack.config.js ，它是webpack项目的入口文件。 /**webpack 配置文件,告诉webpack 它需要做什么*/ // module
webpackDemo:webpack演示
05-02
在这个名为 "webpackDemo" 的项目中，我们将深入探讨 Webpack 的基本概念和核心功能。 ### 1. 入门Webpack Webpack 的主要工作原理是将项目中的所有依赖关系视为图，然后进行分析，生成一个优化过的静态资源图。这...
awesome-webpack:webpack 资料整理
05-14
入门 高阶 - 评论很精彩 webpack 使用优化 【译】基于 Webpack 和 ES6 打造 JavaScript 类库 webpack使用优化（基本篇） webpack使用优化（react篇） React移动web极致优化 webpack 系列 (1) webpack 系列 (2) ...
webpack入门demo代码
10-11
这个“webpack入门demo代码”很可能是为了帮助初学者理解Webpack的基本用法和工作流程。 在Webpack中，核心概念包括： 1. **入口（Entry）**：这是Webpack开始构建的地方，它定义了哪些文件是应用程序的起点。在...
webpack4配置demo
12-18
通过webpack4搭建开发环境，适合入门，笔记和搭建流程都在里面
webpackDemo
08-23
依据webpack官方文档，指南手册整合得demo，让你充分了解打包得全过程。
webpack （打包react)基本demo
03-27
本文件是为了配合webpack2 打包 react 这篇博文路径教程的 demo文件： http://blog.csdn.net/xuelang532777032/article/details/66969574 方便各位同学下下来学习webpack 打包 react 。
webpackdemo
03-06
手动一步步学习webpack的过程，动手写webpack基本设置，了解webpack每个步聚都是用来干什么的，课件配合博客文章学习使用。 1〜11章 https://blog.csdn.net/fengsh998/article/details/88070239
webpack4简单入门实例
10-18
Webpack 4 简单入门实例 Webpack 是一个流行的模块打包工具，用于处理现代JavaScript应用程序的构建过程。它能够将各种资源（如JavaScript、CSS、图片等）转换、打包，并生成适合部署到生产环境的静态资源。Webpack...
webpack插件demo编写
跬步
04-09 1044
webpack插件demo编写 场景：项目仓库是小部件编码管理，需要将生成的dist内单个小部件文件夹手动打包成zip，再上传至项目平台。 因为每次打包完之后都要手动压缩，略微有些繁琐，正好也要试一下怎么写webpack插件，就实现了一个很小的插件demo。 1. webpack怎么写插件 2. 小demo实现步骤 2.1 需求 打包自动生成zip包 2.2 代码分析 插件在哪个钩子函数中执行：done 可以拿到最新的资源 如何获取最新的打包文件：stats.toJson().assets 如何新增zip
小demo快速上手webpack
qq_39112047的博客
03-27 739
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，本文通过一个小demo教大家快速上手webpack
webpack5 学习系列 —— 支持 Vue
且听风吟的博客
04-28 399
webpack5 学习系列 —— 支持 Vue
Webpack学习整理集锦【从最基础的demo入手，自己实现一个脚手架 】
主要领域：前端开发
10-17 500
前言 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 开源网址 https://github.com/maomincoding/webpack_study 你可以打开上面的网址，浏览学习webpack。从最基础的demo入手，自己实现一个脚手架 。
能匹配webpack:///bb/aaa或webpack:///bbb或webpack:///ccc或webpack:///node_modules但是不能匹配webpack:///src
05-12
我可以给你一个简单的正则表达式，可以匹配这些...所以这个正则表达式可以匹配以webpack:///bb/aaa、webpack:///bbb、webpack:///ccc、webpack:///node_modules开头的字符串，但不能匹配以webpack:///src开头的字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值