首页 > 其他分享 >Webpack 入门教程-安装

Webpack 入门教程-安装

时间:2023-07-29 21:00:47浏览次数:42  
标签:cnpm app 入门教程 dashu webpack js Webpack 安装

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

Webpack 入门教程-安装_css

标签:cnpm,app,入门教程,dashu,webpack,js,Webpack,安装
From: https://blog.51cto.com/u_15974582/6895542

相关文章

  • 基于wsl2在container中利用conda安装pytorch环境
    ###一、利用conda创建一个新的环境参考命令condacreate-nENV_NAMEpython=X.X•-nENV_NAME指定环境名称•python=X.X指定要创建的Python版本,比如python=3.6使用命令:condacreate-npytorch1.13python=3.8参考资料-Anacondaconda常用命令:从入门到精通:https://......
  • Android studio 4.1.2安装入门教程
    目录JDK安装与配置一、下载JDK二、JDK安装三、JDK的环境配置四、JDK的配置验证Androidstudio安装Androidstudio连接手机真机调试(以华为鸿蒙为例)一、新建一个android项目二、进入项目面板三、配置AndroidStudio四、安装手机驱动程序五、连接手机六、运行程序七、......
  • Centos7.9版本安装collectd并开启写入rrd文件功能
    文章目录一、背景介绍二、为什么用这个三、安装Collectd3.1尝试docker安装3.2尝试执行linux命令一步一步安装安装collectd设置将数据写入日志文件设置将数据写入rrd文件。一、背景介绍Collectd官网:https://collectd.org/Collectd是一款开源的系统统计守护进程,用于收集、处理和存......
  • 【webpack系列】从基础配置到掌握进阶用法
    前言本篇文章将介绍一些webpack的进阶用法,演示内容继承自上一篇文章的内容,所以没看过上一篇文章的建议先学习上一篇内容再阅读此篇内容,会更有利于此篇的学习~文件指纹文件指纹指的是打包输出的文件名后缀,一般用来做版本管理、缓存等webpack的指纹策略有三种:hash、chunkhash、content......
  • windows10 安装.NET 5开发环境
    0、环境说明操作系统:windows10系统64位  1、开发工具版本windows10系统VisualStudio2019开发.NET5项目环境要求:VisualStudio2019 :升级到版本16.8以上(可直接在VS工具中直接升级版本) 2、下载.NET5官网网址:https://dotnet.microsoft.com/zh-cn/download/dotnet......
  • 记录Ubuntu20.04安装Python3.7
    1、先升级一下软件包列表和软件包管理工具sudoapt-getupdatesudoapt-getupgrade 2、安装依赖:sudoaptinstallopenssl*zlib* 3、下载Python压缩包wgethttps://www.python.org/ftp/python/3.7.1/Python-3.7.1.tgz 4、解压缩tar-zxvfPython-3.7.1.tgz进入解......
  • electron的electron-packager打包运行和electron-builder生产安装包过程,学透 Electron
    electron的electron-packager打包运行和electron-builder生产安装包过程开发electron客户端程序,打包是绕不开的问题。macOS应用构建,看似近在咫尺,实则坑坑致命。场景:mac笔记本打包,以及生产出可交付的软件安装包,如何避坑,如何理解app的产生过程!!!!可以按照我测试的路程来配置环境。包......
  • Java学习-1.jdk和IntelliJ IDEA安装
    1.jdk下载与安装下载地址:https://www.oracle.com/java/technologies/downloads/#jdk20-windows 环境配置:1.我的电脑–》右键属性–》高级系统设置–》环境变量2.系统变量–》新建系统变量–》完成后点击确定3.双击系统变量下的PATH变量,新建两个路径(最下方两个)4. 新......
  • PHP8开发工具VS Code的安装-PHP8知识详解
    作为PHP8的开发工具有很多,具有IDE功能的有phpstorm、VisualStudioCode、SublimeText、NetBeans、Eclipse、Codelobster、PHPDesigner等,当然还有很多轻量的工具,比如Notepad、Editplus等。本文给你介绍的是万能编辑器VisualStudioCode,简称VSCode。我为什么选择VisualStudioC......
  • 安装ThinkPHP8-ThinkPHP8知识详解
    我们在讲解前面的文章《搭建PHP8集成环境》和《给PHP8和MySQL8添加到环境变量》以后,现在可以正式的安装ThinkPHP8啦、1、打开phpenv,启动服务,打开昨天新建的tp8.com的目录(D:\phpEnv\www\tp8.com),把里面默认的文件index.php删除。2、在当前目录的地址栏里面,输入cmd,启动命令提示符,在命......