这里使用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. 使用Intellij idea新建Java Web项目(servlet) 原理及初步使用

    准备 JDK       (配置JDK_HOME\bin   和 CLASSPATH)   注:JDK8下载已经需要注册了,请使用JDK11(现在是官方长期支持的版本)     对于我们新手来说,JD ...

  2. Ubuntu安装支持PCL、LAS的CloudCompare

    git clone --recursive https://github.com/cloudcompare/trunk.git cd trunk mkdir build cd build cmake ...

  3. (九)golang--标识符的命名规则

    标识符的概念: (1)各种变量.方法等命名时使用的字符序列被称为标识符: (2)凡是可以自己起名字的都可以叫标识符: 标识符的命名规则: (1)由26个英文字母大小写,0-9,_组成 (2)数字不可以 ...

  4. 实战django(二)--登录实现记住我

    上节初步实现了登录和注册模块,这节我们进一步实现“记住我”功能. 大体功能分为以下模块: 1.在登录时如果勾选记住我,那么就将用户username存进cookie中,跳转到index页面: 2.此时, ...

  5. linux写shell注意的问题

    linux写shell注意的问题一定要vi crontab.sh来写 ps:在windows系统中编辑过这个文件,就会出现类似的换行符 这样导致linux系统中运行sh报错 比如会出现$MQ字符 如果 ...

  6. Rollup 配置 es6 环境

    前 为了可以使用新型的语法,顺便在兼容下老的浏览器,所以需要自己搭建个环境,目前我个人推崇使用 rollup,主要喜欢它的 tree-shake,打包出来的代码真的很简洁. 配置 rollup.con ...

  7. HTML ------- 对文本进行操作的元素

    1.HTML 标题(Heading) 在<h1>  -- <h6> 标签进行定义,<h1>定义最大标题,<h6>定义最小的标题 作用:标题会自动加粗,大 ...

  8. java中的对象、类、包、模块、组件、容器、框架、架构的概念入门

    在Java中有那么一些概念:对象.类.包.模块.组件.容器.框架.这些概念都有一个共同的特点,就是[容纳]. 对象(Object) 在Java的世界里,对象是通过属性和方法来分别对应事务所具有的静态属 ...

  9. [4]Hexo静态博客背景及界面显示优化配置

    示例预览:我的主页 前提预设: [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 [1]hexo+github搭建个人博客的过程记录 背景图片添加 ...

  10. git账户配置

    一.生成github的ssh key ssh-keygen ssh-keygen -t rsa -f ~/.ssh/zzf073_rsa -C zzf073@163.com 二.配置账户公钥 1.查看 ...