Webpack 入门教程

亦凉 2021-09-20 13:50 428阅读 0赞

Webpack 是一个前端资源加载/打包工具。

安装 Webpack

使用 cnpm 安装 webpack：

cnpm install webpack -g

创建项目  
接下来我们创建一个目录 app：

mkdir app

在 app 目录下添加 runoob1.js 文件，代码如下：

app/runoob1.js 文件
    document.write("It dashu.");

app/index.html 文件

<html>
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
        </body>
    </html>

接下来我们使用 webpack 命令来打包：

webpack dashu.js bundle.js

配置文件

app/webpack.config.js 文件
    module.exports = {
        entry: "./dashu.js",
        output: {
            path: __dirname,
            filename: "bundle.js"
        },
        module: {
            loaders: [
                { test: /\.css$/, loader: "style-loader!css-loader" }
            ]
        }
    };

插件

cnpm install webpack --save-dev

# 安装 #

cnpm install webpack-dev-server -g

# 运行 #

webpack-dev-server --progress --colors

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[1240]: /images/20210724/c3a294d6cadb48e494338c4d48f8ee30.png
[1240 1]: /images/20210724/ced46d85ff8a4e94a60becd9a9ec0fe0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关【Webpack】Webpack基础入门

目录 1. 模块化相关概念 1.1 模块化的概念 1.2 模块化规范

红太狼/ 2023年02月17日 11:13/ 0 赞/ 294 阅读

相关 webpack 快速入门教程

目录 1、了解 Webpack 相关什么是 webpack 五大“护法”

傷城~/ 2022年10月15日 04:53/ 0 赞/ 295 阅读

相关 webpack入门

安装nodejs、npm省略，webpack版本使用2.6.1 1、安装webpack 由于使用npm安装很慢，因此切换成cnpm，安装命令： npm insta

拼搏现实的明天。/ 2022年06月14日 10:06/ 0 赞/ 241 阅读

相关 webpack2学习笔记》入门级教程

随着node的流行，webpack的地位也日益突出，慢慢的已成为构建工具中的佼佼者，现在带你解开它神秘的面纱，有没有一种莫名的兴奋感目录 1. What 2.

淡淡的烟草味﹌/ 2022年06月08日 02:27/ 0 赞/ 255 阅读

相关 webpack入门

webpack可以打包的不仅仅是js了，css，sass，图片都可以进行打包，下面有入门的一步一步的简单示例：概念：webpack是模块加载器兼打包工具，它能

ゞ浴缸里的玫瑰/ 2022年05月30日 12:21/ 0 赞/ 245 阅读

相关 webpack入门

文章目录前言安装开始项目结构 webpack配置 loader加载器 plu

悠悠/ 2022年03月16日 11:24/ 0 赞/ 269 阅读

相关 Webpack入门教程三

16.打包命令除了webpack外,还可以在package.json中配置,配置内容如下 { "name": "webpackapp",

本是古典何须时尚/ 2022年01月09日 15:49/ 0 赞/ 297 阅读

相关 Webpack4教程：配置快速入门

Webpack4教程：配置快速入门 Webpack4版本 1.webpack安装 1.1 项目初始化 1.2

╰+哭是因爲堅強的太久メ/ 2021年11月17日 00:20/ 0 赞/ 550 阅读

相关 Webpack 入门教程

Webpack 是一个前端资源加载/打包工具。安装 Webpack 使用 cnpm 安装 webpack： cnpm install webpack -g 创

亦凉/ 2021年09月20日 13:50/ 0 赞/ 429 阅读

相关 Webpack 入门

为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出

系统管理员/ 2021年09月15日 01:28/ 0 赞/ 471 阅读