这里使用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. skip connections

    deep learning初学者,最近在看一些GAN方面的论文,在生成器中通常会用到skip conections,于是就上网查了一些skip connection的博客,虽然东西都是人家的,但是出于 ...

  2. PDMan-2.1.0 正式发布:用心开源,免费的国产数据库建模工具 PowerDesigner

    PDMan是一款开源免费的数据库模型建模工具,支持Windows,Mac,Linux等操作系统,是PowerDesigner之外,更好的免费的替代方案.他具有颜值高,使用简单的特点.包含数据库建模,灵 ...

  3. Vue.js+vue-element

    Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)   Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程 ...

  4. Unity Shader 2D水流效果

    水流的模拟主要运用了顶点变换和纹理动画的结合: 顶点变换中,利用正弦函数模拟河流的大致形态,例如波长,振幅等. 纹理动画中,将纹理坐标朝某一方向持续滚动以形成流动的效果. 脚本如下: Shader & ...

  5. Salesforce学习之路(二)Profile

    如上篇文章所述,针对User来讲,最重要的概念便是Profile和Role,因为Profile于Security息息相关,这是一个合格的产品中十分重要的一环. 何为Profile? 前文所讲--就是一 ...

  6. ES6高级技巧(四)

    238 数字->二进制->补码->十进制 const bitwise = N => { if (N < 2) { return N == 0 ? 1 : 0 } /*转化 ...

  7. orientation属性(判断是否为横竖屏)

    现在有一个需求:移动端网页默认竖屏显示,当用户横屏浏览,就给予相应提示,比如横屏时显示下面截图提示信息 几年前,可能大家想到用 window.orientation 属性来实现,现官方已弃用,不做推荐 ...

  8. 02、策略模式(Strategy)

    一.概念: 策略是为达到某一目的而采取的手段或方法,策略模式的本质是目标与手段的分离, 手段不同而最终达成的目标一致.客户只关心目标而不在意具体的实现方法, 实现方法要根据具体的环境因素而变化. 二. ...

  9. lombok的@Accessors注解3个属性说明

    https://www.cnblogs.com/kelelipeng/p/11326936.html https://www.cnblogs.com/kelelipeng/p/11326621.htm ...

  10. 通用高效字符串匹配--Sunday算法

    字符串匹配(查找)算法是一类重要的字符串算法(String Algorithm).有两个字符串, 长度为m的haystack(查找串)和长度为n的needle(模式串), 它们构造自同一个有限的字母表 ...