这里使用webpack4.41.2 为例

一、安装webpack

1、本地安装,安装最新版本或特定版本

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本,你还需要安装 CLI

npm install --save-dev webpack-cli

2、全局安装

npm install --global webpack webpack-cli
或 npm install -g webpack webpack-cli

二、使用webpack 打包

1、方法一,命令行打包方式

//开发模式打包,打包好的文件不会被压缩
webpack --mode development demo.js bundle.js
//最新版的webpack 需要加参数- o,来指定输出的文件
webpack --mode development demo.js -o bundle.js

2、使用webpack的配置文件来打包

webpack -config webpack.conf.js (指定webpack的配置文件)

配置文件如下webpack.conf.js:

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

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

  1. webpack的安装和使用

    Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...

  2. Bug记载1之webpack本地安装

    当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself ...

  3. webpack 介绍 & 安装 & 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  4. WebPack的安装

    一.前提因为webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm.在这里我使用的版本是:node:v5.8.0 ,npm:3.7.3,若是版本问题, ...

  5. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  6. webpack局部安装的问题

    webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...

  7. WebPack 从安装到闲置

    序言:各种技术在研究过程中常常会出现在实际工作中难以实施的情况,于是就慢慢闲置,但学毕竟还是必须要学学的,就看能用到多少,至少开拓了眼界,谨以此安慰下那些学完又闲置的技术~ 跑题结束,以下开始正式配置 ...

  8. 【01】webpack的安装过程截图

    [05](moyu:最好安装在C盘.默认的安装地址.) []全局安装 01,首先要安装Node.js, Node.js 自带了软件包管理器 npm. 02,Webpack 需要 Node.js v0. ...

  9. 【前端_React】Node.js和webpack的安装

    第一步——安装Node.js 首先要安装Node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件.Node.js的下载地址 可以自定义安装到指定的路径下,待安装完成后命令行 ...

  10. 85.webpack的安装失败至成功

    webpack怎么安装 1.安装node.js; 2.安装webpack:   npm install webpack --save-dev   : 注意:webpack 4x以上,webpack将命 ...

随机推荐

  1. 这篇文章主要讲解C#中的泛型,泛型在C#中有很重要的地位,尤其是在搭建项目框架的时候。

    一.什么是泛型 泛型是C#2.0推出的新语法,不是语法糖,而是2.0由框架升级提供的功能. 我们在编程程序时,经常会遇到功能非常相似的模块,只是它们处理的数据不一样.但我们没有办法,只能分别写多个方法 ...

  2. 2019年上-C语言程序设计课程内容

    第一节课 序言 为何学习C语言 打印hello world程序 编译步骤,认识编译器 冯诺依曼体系结构 hello world程序如何在计算机上运行的 第二节课 基本数据类型与表达式 求华氏温度对应的 ...

  3. 文件上传之靶场upload-labs (11-20)

    第十一关 strrpos() 函数查找字符串在另一字符串中最后一次出现的位置 substr() 函数返回字符串的一部分 文件保存的方式是上传路径+随机时间+截取的文件后缀 其中上传路径可控,可以利用这 ...

  4. jsplumb 初识

    Jsplumb官网:https://jsplumbtoolkit.com GitHub:https://github.com/sporritt/jsplumb/    有很多官网示例 基础教程:htt ...

  5. 使用Prometheus+Grafana监控JVM

    一.概述 JMX Exporter https://github.com/prometheus/jmx_exporter 它是Prometheus官方组件,作为一个JAVA Agent来提供本地JVM ...

  6. Git 核心概念

    原文链接 Git的核心概念 聪聪的个人网站 本文不是Git使用教学篇,而是偏向理论方面,旨在更加深刻的理解Git,这样才能更好的使用它,让工具成为我们得力的助手. 版本控制系统 Git 是目前世界上最 ...

  7. HTML5 下拉控件绑定数据

    <select id="CommunityList" class="form-control" > <option>請選擇社團</ ...

  8. Dos.ORM修改数据遇到的问题

    2019年11月6日,今天使用Dos.ORM进行数据的批量修改,出现修改一条数据造成所有数据相应状态改变的情况,代码如下: 按照一步步调试的方式,排查出原因:生成的orm实体类缺少 主键 的标识,该原 ...

  9. 在VB编程中,若一行代码太长需要换行时,行尾要加什么符号

    & _ 注意,&与_之间一定要有一个空格 例如: aa="select " & _     "  a,b,c" & _      ...

  10. 使用GitHub/码云/Git个性化设置

    参考链接:https://www.liaoxuefeng.com/wiki/896043488029600/900937935629664 这似乎很可笑,我还从来没有想过为一个网站的使用方法写一篇来记 ...