Webpack 安装教程

news/2024/10/23 17:27:26/

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


http://www.ppmy.cn/news/990023.html

相关文章

Linux下进程特性总结:工作目录,环境变量,标准输出转命令行参数,O_CLOEXEC标志作用,读写锁控制进程互斥

进程是运行中的程序&#xff0c;是资源分配的最小单位&#xff0c;其有一些特性对于实际开发很有帮助&#xff0c;本篇博客将进程的相关特性进行梳理总结&#xff0c;包含工作目录&#xff0c;环境变量&#xff0c;标准输出转命令行参数&#xff0c;读写锁控制进程互斥。 目录…

数学建模算法应用合辑-AHP层次分析法【电工杯】高校教学资源合理分配

目录 摘 要 一、 问题重述 1.1 问题的背景 1.2 问题的描述 二、 问题的分析 2.1 概述

【算法基础:动态规划】5.4 数位统计DP(计数问题)(数位DP)

文章目录 例题&#xff1a;338. 计数问题解法1——转换成1067. 范围内的数字计数&#xff0c;数位DP模板解法2——分情况讨论&#xff08;TODO&#xff0c;还没理解&#xff09; 相关链接⭐ 例题&#xff1a;338. 计数问题 https://www.acwing.com/problem/content/340/ 解法…

力扣75——队列

总结leetcode75中队列的算法题解题思路。 上一篇&#xff1a;力扣75——哈希表/哈希集合 以下代码大部分为本人所写&#xff0c;少部分为官方示例代码。 力扣75——队列 1 最近的请求次数2 Dota2 参议院1-2 解题总结 1 最近的请求次数 题目&#xff1a; 写一个 RecentCounter…

PP-Matting: AI高精度图像前景Matting,让抠图轻而易举

分割和Matting的一个重要区别是:分割返回的是像素分类标签,其结果是整型数据;而Matting返回的是属于前景或背景的概率P,从而在前景与背景交互区域产生渐变的效果,使得抠图更加自然。Matting分割模型训练完成后,对于原始图像每个位置上的像素,都将生成一个表示其前景透明…

mysql innodb一些知识点

1、事务和锁的关系&#xff1b; 在MySQL事务中&#xff0c;只要开始了一次事务&#xff0c;就会自动加上一个共享锁&#xff08;Shared Lock&#xff09;。这个锁会在事务结束时自动释放。如果在事务中需要更新某个数据对象&#xff0c;那么MySQL会将该数据对象的共享锁升级为…

Echarts 文字太长用省略号代替

xAxis: [{type: category,data: [materialUserEchartsDate.value[0] ? materialUserEchartsDate.value[0].name : ,materialUserEchartsDate.value[1] ? materialUserEchartsDate.value[1].name : ,materialUserEchartsDate.value[2] ? materialUserEchartsDate.value[2].na…

LeetCode刷题笔记-287题寻找重复数

LeetCode 287 寻找重复数 难度&#xff1a;中等 题目&#xff1a; 给定一个包含 n 1 个整数的数组 nums &#xff0c;其数字都在 [1, n] 范围内&#xff08;包括 1 和 n&#xff09;&#xff0c;可知至少存在一个重复的整数。 假设 nums 只有 一个重复的整数 &#xff0c;返回…