这里使用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. ES方法使用注意

    matchQuery:会将搜索词分词,再与目标查询字段进行匹配,若分词中的任意一个词与目标字段匹配上,则可查询到.   termQuery:不会对搜索词进行分词处理,而是作为一个整体与目标字段进行匹配 ...

  2. matlab实现主成分分析(遥感图像处理)

    数据说明:采用的数据源是从别人那里拷的2012年全年的Sea Surface Temperature(海标温度,SST)数据,一直想找一份比较好的主成分分析数据,也没找到. Matlab自身有主成分分 ...

  3. Java实现牛顿迭代法求解平方根、立方根

    一.简介 牛顿迭代法(Newton's method)又称为牛顿-拉夫逊(拉弗森)方法(Newton-Raphson method),它是牛顿在17世纪提出的一种在实数域和复数域上近似求解方程的方法. ...

  4. Java一个简单的重试工具包

    在接口调用中由于各种原因,可能会重置失败的任务,使用Guava-Retrying可以方便的实现重试功能. 首先,需要引用Guava-Retrying的包 <dependency> < ...

  5. SpringBoot第十八篇:异步任务

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11095891.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   系统中的异 ...

  6. odoo action

    动作的加载: 刷新视图页面执行load_views方法 /web/dataset/call_kw/model_name/load_views 在odoo/models.py的BaseModel中有一个 ...

  7. javascript碰撞检测的方法

    javascript碰撞检测的方法需要把要检测碰撞的精灵都放到数组里array push 然后循环遍历数组里的精灵检测碰撞 ps:不放到数组里没办法循环遍历检测每个精灵核心代码如下 <pre&g ...

  8. sentry之一:sentry安装

    Sentry 是一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题.它主要专注于持续集成.提高效率并且提升用户体验.Sentry 分为服务端和客户端 SDK,前者可以直接使用它家提供的在 ...

  9. 【CF285E】Positions in Permutations(动态规划,容斥)

    [CF285E]Positions in Permutations(动态规划,容斥) 题面 CF 洛谷 题解 首先发现恰好很不好算,所以转成至少,这样子只需要确定完一部分数之后剩下随意补. 然后套一个 ...

  10. AWS云创建EC2与使用注意事项-踩坑记录

    目录 AWS 一 创建 EC2(云服务器) 二.AWS 注意事项 三.AWS 申请 SSL 证书 四. 创建VPC AWS 文章 GitHub 地址: 点我 AWS云服务器价格计算器 AWS WEB ...