1. 新建项目文件夹,如 webpack-demo

2. cd 到安装项目根目录,即进入webpack-demo文件夹,命令行工具输入“npm install webpack webpack-cli --save-dev” ,回车安装webpack。

3. 在wenpack-demo文件夹中新建一个entry.js文件作为webpack的入口文件,并随便输入一段js代码。

4. 在webpack-demo文件夹新建 webpack 配置文件 webpack,config.js,并输入如下代码:

var path = require('path');
module.exports={
mode: "development",
entry: './entry.js', //注意:这里不可省略“./”,否则会报错找不到entry.js,即便它就位于当前目录也不可
//entry: __dirname+'/entry.js', //与上句两者择一即可,其中__dirname表示当前目录的路径等同于“./”的作用
output: { //注意:output的值必须为object对象,这里表示打包结果将会输出到当前目录的dist文件夹中的entry.bundle.js,若不存在dist文件夹则新建一个。
path: path.resolve(__dirname, 'dist'),
filename: 'entry.bundle.js'
}
}

此时的项目文件目录如下:

5. 命令行中输入命令 “webpack” ,验证是否可行,结果如下。

webpack 安装使用简例的更多相关文章

  1. webpackt入门1:webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  2. webpack安装,常见问题和基本插件使用

    一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...

  3. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  4. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  5. linux下C语言socket网络编程简例

    原创文章,转载请注明转载字样和出处,谢谢! 这里给出在linux下的简单socket网络编程的实例,使用tcp协议进行通信,服务端进行监听,在收到client的连接后,发送数据给client:clie ...

  6. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

  7. 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  8. homebrew 安装 formula 的不同历史版本——以安装 node 为例

    homebrew 安装 formula 的不同历史版本--以安装 node 为例 系统环境 macOS Mojave 10.14 Homebrew 1.8.0 Homebrew/homebrew-co ...

  9. webpack安装整理

    早上有点时间大概安装一下webpack,操作一下顺便把步骤记一下,乱乱的,还是记录一下吧! webpack安装步骤:1. 2. 3.一直回车,出现如下图: 4.创建src和dist文件 5.需要在np ...

随机推荐

  1. 【NX二次开发】获取边的类型 UF_MODL_ask_edge_type

    源码 extern DllExport void ufsta(char *param, int *returnCode, int rlen) { UF_initialize(); int edge_t ...

  2. 源码级别理解 Redis 持久化机制

    文章首发于公众号"蘑菇睡不着",欢迎来访~ 前言 大家都知道 Redis 是一个内存数据库,数据都存储在内存中,这也是 Redis 非常快的原因之一.虽然速度提上来了,但是如果数据 ...

  3. centos 7 查看磁盘使用情况

    1.查询系统整体磁盘使用情况 df -h [root@hadoop100 aubunt]# df -h 文件系统 容量 已用 可用 已用% 挂载点 /dev/mapper/centos-root 17 ...

  4. Jenkins 构建自动化 .NET Core 发布镜像

    Jenkins 构建自动化 .NET Core 发布镜像 导读 在本章中,将介绍如何在 Linux 下使用 Docker 部署.启动 Jenkins,编写脚本,自动化构建 .NET Core 应用,最 ...

  5. 精通Proteus仿真器件制作(3)DLL仿真模型创建

    有些人可能会想:什么叫做"DLL仿真模型之原理图符号"?我想学高级的C++创建DLL(动态链接库)仿真模型的方式,你别拦着我,不然,我可就人挡Kill人,佛挡Kill佛啦!原理图符 ...

  6. 旁路电容的PCB布局布线透彻详解(4)

    原文地址点击这里: 前面使用了较多的篇幅介绍旁路电容的工作原理及其选择依据,我们已经能够为电路系统中相应的数字集成芯片选择合适的旁路电容,在实际应用过程中,旁路电容的PCB布局布线也会影响到高频噪声旁 ...

  7. delphi xe 10.3 利用Git组群开发,Git服务器安装,Git 拉取,提交,推送相关设置操作

    1. Git服务器安装, 参考 https://blog.csdn.net/u012842630/article/details/97175397 Git服务器官方网站,要FQ. 2. 工具软件 gi ...

  8. R语言六种数据类型

    1 向量 1.1 定义向量 向量使用c来赋值,向量中不能混合不同类型的数据 x<-c(2,3,7,6,8)  数值型num y<-("one","two&qu ...

  9. 【LeetCode每日一题 Day 1】1. 两数之和

    大家好,我是编程熊,今天是LeetCode每日一题的第一天,今天的你比昨天更加优秀啦! 题意 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target ...

  10. 快来为你的 .NET 应用加个监控吧!

    导读 CZGL.ProcessMetrics 是一个 Metrics 库,能够将程序的 GC.CPU.内存.机器网络.磁盘空间等信息记录下来,使用 Prometheus 采集信息,然后使用 Grafa ...