【Web前端基础】node如何安装webpack

2021-02-01 09:54发布

4条回答
duans
2楼 · 2021-02-01 11:47

    webpack构建工具是基于node平台的, 所以在安装之前必须先安装nodejs. 接在来就可以通过npm包管理工具在线安装webpack了.

    对于webpack构建工具, 即可全局安装, 也可以局部安装. 一般情况下,大多数会采用局部安装, 因为每一个项目需要对webpack进行不同的配置. 接下来演示下局部安装webpack.

第一步: 使用npm进行项目初始化

npm init -y

第二步: 安装webpack核心依赖

// 由于webpack是开发依赖, 所以一般保存为--save-dev; 
// 新版webpack需要安装两个依赖, webpack是核心依赖, webpack-cli是命令行工具依赖 
npm install webpack webpack-cli --save-dev

    接下来就可以使用webpack项目文件打包了, webpack默认是基于模块化的方式进行项目构建的. 所以需要通过配置文件对webapck进行一系列配置, 让webapck安装我们的项目结构对项目进行构建. 

在项目根目录下创建配置文件webpack.config.js:

const path = require('path');
module.exports = {
  // 指定打包入口
  entry: './src/index.js',
  // 指定打包模式, development表示开发模式, production表示生产模式(生产模式会对代码压缩混淆)
  mode:'development'
  // 指定打包之后文件的存放目录以及文件名
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

其他webpack相关配置可参考https://webpack.docschina.org/

haotata
3楼 · 2021-02-02 09:55

node是基于模块化开发的,而模块化开发的弊端在于无论是同步加载还是异步加载模块,都会有一些缺陷:如多次请求,占用带宽,启动慢,不需要的模块也下载或公用的模块重复加载等。webpack的出现是为了解决以上模块化的一些缺陷,主要是三个方面:

1、公共的模块(能够复用的打包成一个)+单个用的模块(不能复用的单独打包)

2、webpack本身只能处理.js模块,但是可以通过插件实现打包处理其他类型文件,如css、图片等

3、加载模块时,实现动态分析,只加载需要使用的js


webpack 安装配置:

1) 首先创建一个空目录,例webpacktest(不能是汉字或特殊关键词如webpack), 命令行进入该目录,输入npm init -y

2) 安装webpack 及 webpack-cli。输入:npm i webpack webpack-cli --save-dev

3)在webpacktest 下创建开发目录,如:src ,然后就可以在src下创建各种项目文件,如js,css,图片,less等,执行正常的开发步骤

4)最后需要打包时,首先在根目录下创建webpack.config.js,基本的配置内容如:

module.exports = { 

entry: { index: "./src/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js文件 }, 

output: { filename: "[name].bundle.js",//输出文件名,[name]表示入口文件js名 

path: path.join(__dirname, "public")//输出文件路径 

}

5) 然后执行npm run dev即可实现webpack的打包配置功能了。webpack的基本功能是将所有依赖的js模块进行打包,但是其他资源文件如css,less,jpg等等可以安装相应的插件来完成

722
4楼 · 2021-02-02 09:57

   webpack构建工具是基于node平台的, 所以在安装之前必须先安装nodejs. 接在来就可以通过npm包管理工具在线安装webpack了.

    对于webpack构建工具, 即可全局安装, 也可以局部安装. 一般情况下,大多数会采用局部安装, 因为每一个项目需要对webpack进行不同的配置. 接下来演示下局部安装webpack.

第一步: 使用npm进行项目初始化

npm init -y

第二步: 安装webpack核心依赖

// 由于webpack是开发依赖, 所以一般保存为--save-dev; 
// 新版webpack需要安装两个依赖, webpack是核心依赖, webpack-cli是命令行工具依赖 
npm install webpack webpack-cli --save-dev

    接下来就可以使用webpack项目文件打包了, webpack默认是基于模块化的方式进行项目构建的. 所以需要通过配置文件对webapck进行一系列配置, 让webapck安装我们的项目结构对项目进行构建. 

在项目根目录下创建配置文件webpack.config.js:

const path = require('path');module.exports = {
  // 指定打包入口  entry: './src/index.js',
  // 指定打包模式, development表示开发模式, production表示生产模式(生产模式会对代码压缩混淆)  mode:'development'  // 指定打包之后文件的存放目录以及文件名  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'  }
};

其他webpack相关配置可参考https://webpack.docschina.org/


流浪小先生
5楼 · 2021-02-08 10:54

安装命令:

npm i webpack webapck-cli

webpack ,组件,是使用webpack热更新,和基础打包优化必备组件。

webapck-cli,webpack命令行运行工具。

相关问题推荐

  • 回答 15

    对于新入门的小伙伴来说,选择一个合适的nodejs框架可能是一件很头疼的事情,我最初也为这个头疼过,下面分享一下我的框架选择之路nodejs的框架最近来node的火热,带动了一大批的框架,例如express koa sails loopback thinkjs egg这些是我比较过的框架,下面...

  • PHP与Node.js的区别2021-01-18 10:23
    回答 19

    PHP胜出:代码与内容混合大家在输入的过程中当然希望能将自己的思路直接转化为网站的文本内容,同时还要为进程添加分支、一部分if-then语句以保证站点拥有漂亮的视觉效果,具体取决于URL中的某些参数。又或者,我们希望能够利用单一数据库将文本或者数据加以...

  • 回答 9
    已采纳

    这个问题涉及到的是整个web开发体系的变更。我尽量长话短说,有问题可以继续留言。现在的web开发体系可以说是在15年后才逐渐形成,因为15年比较特殊,html5和ES6都是在这一年发布,css3的最后一次更新在2014年。这些变更带来的变化是产生了前后分离的开发方式...

  • 回答 3

    初次接触nodejs确实有一些难度,因为思路语法都和js有了一些差别,属于后端思想,所以需要楼主多下功夫,进行系统学习之后就容易接受了

  • 回答 13

    //首先卸载已安装的node-sasscnpm uninstall node-sass//重新安装cnpm install node-sass//如果报关于gyp的错,安装相关的gyp编译环境npm install -g node-gyp//再重复执行以上的卸载安装步骤//安装完成启动项目试试npm run dev...

  • 回答 10

    node.js 和 javascript 从本质上来说没有什么区别,语言是一样的,都是javascript语言编写。但是,node.js 主要从事后台操作,javascript主要操作HTML的元素(前端)。

  • 回答 8

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。(事件驱动:事件触发过程中,进行决策的一种策略,简单说就是跟随当前时间点上出现的事物,调用可用的资源进行解决该事物...

  • 回答 10

    global 最根本的作用是作为全局变量的宿bai主。按照ECMAScript 的定义,满足以下条 件的变量是全局变量:在最外层定义的变量;全局对象的属性;隐式定义的变量(未定义直接赋值的变量)。当你定义一个全局变量时,这个变量同时也会成为全局对象的属性,反之亦...

  • 回答 3

    vue-cli脚手架是基于node平台的, 所以安装之前, 必须先安装nodejs. 之后直接通过npm包管理工具即可完成vue-cli脚手架工具的安装. 目前市面上流行的vue-cli脚手架有两个版本, 接下来分别演示下:安装vue-cli-2.x版本// -g 表示全局安装 npm install vue-cli...

  • 回答 3

    1.打开node官网 https://nodejs.org/en/,选择 other Downloads,2.安装Windows Binary 64位或者32位3.将你减压后的路径保存一份,如(D:\soft\node-v10.16.3-win-x64)4.找到系统路径(控制面板-》系统-》高级系统设置-》环境变量-》path),获取到 5.找到...

  • 回答 5

    一、安装环境1、本机系统:Windows 10 Pro(64位)2、Node.js:v6.9.2LTS(64位)二、安装Node.js步骤1、下载对应你系统的Node.js版本2、选安装目录进行安装3、环境配置4、测试

  • 回答 4

    Node.js是一个基于Chrome v8引擎建立的JavaScript运行平台,用于搭建响应速度快、易于扩展的网络应用。本文和大家分享的是Node.js的一些特点,希望对大家有帮助。  异步I/O  这里,我们来详细解释一下:  异步是什么意思  比如说你的爸,今天要叫你做...

  • 回答 5

    dejs适用于I/O密集的应用,而不太适用于计算密集的应用我用 Node.js 开发了 Am I Hacked,算是有一点用 Node.js 支持大流量的经验。先列一些数字服务器是 Linode 512,也就是 Linode 上最低端的。...

没有解决我的问题,去提问