(一)webpack入门——webpack的安装

在看webpack官方文档的主页的时候,看着看着就想放弃 ,英文读起来吃力,也不知道webpack到底是用来干什么的。在之前虽然从别人那里知道webpack是现在很流行的前端构建工具,只是一个概念而已,具体不知道到底是干嘛,怎么用等等。然而在扫了几眼主页的时候还是不知道他用了干嘛的,真的放弃过,后来还是想想硬着头皮看吧。在自己的努力下总算明白了一些,下面将自己从官网学到的记录下来。至于webpack是什么,慢慢跟着我来动手,你就能理解他是什么了。

这篇文章的以下内容来自官方文档(不是直译,也有自己的内容):  http://webpack.github.io/docs/installation.html

webpack 是基于nodejs的,使用nodejs的包管理工具npm来安装的。

webpack安装

使用以下命令安装webpack:

$ npm install webpack -g

通过以上命令全局安装了webpack,webpack命令可以使用了。

在项目中使用webpack

用npm增加一个package.json配置文件

$ npm init

安装webpack插件并将webpack配置到package.json文件中

$ npm install webpack --save-dev

这篇文章就到这里,接着看看webpack是怎么使用的。下篇文章  (二)webpack入门——webpack的使用

时间: 2024-10-10 23:36:00

(一)webpack入门——webpack的安装的相关文章

(二)webpack入门——webpack的使用

上一篇文章 (一)webpack入门——webpack的安装 中,我们知道了webpack的安装,接下来我们要学习如何使用webpack. 以下内容来自webpack文档(不是直译): http://webpack.github.io/docs/usage.html 简单的webpack使用   创建一个模块化的Javascript项目 创建一个文件件,在文件夹里面创建两个js文件,分别命名为cats.js.app.js,并使用CommonJs语法来创建文件内容. cats.js文件内容: va

webpack入门——webpack的安装与使用

一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,

Webpack 入门指南 - 1.安装

Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统中安装一次就可以了. 2. 全局安装 Webpack 我们希望能够在系统的任何文件夹中使用 Webpack,使用的方式是通过 Webpack 命令来完成的,这需要我们全局安装 Webpack.这也只需要安装一次,以后每个项目就不需要重新全局安装了. $ npm install webpack -g

Webpack 入门

Webpack 入门 Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统中安装一次就可以了. 2. 全局安装 Webpack 我们希望能够在系统的任何文件夹中使用 Webpack,使用的方式是通过 Webpack 命令来完成的,这需要我们全局安装 Webpack.这也只需要安装一次,以后每个项目就不需要重新全局安装了. $ npm install

Webpack 入门指南 - 3. Hello, Angular2!

Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目相比,我们不使用 System.js,而是使用 TypeScript 直接编译,然后使用 Webpack 打包生成代码. 1. 下载 Angular 2 以及依赖包 修改我们的 package.json 文件,添加 Angular 2 涉及的包,和 Angular 2 所依赖的包,以后,我们可以慢慢

webpack入门--前端必备

webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但这不用我们理会,因为 webpack 有着各种健全的加载器(loader)在处理这些事情. 为什么要使用 webpack? 很简单的一个道理,难道写react的同学会不用它

React +ES6 +Webpack入门

React +ES6 +Webpack入门 React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再赘述.本文将详细的记录react babel webpack的环境搭建,以及搭建的过程中遇到的一些坑. 一.新建React项目 1.如图为新建react项目结构,其中 entry.js放置react入口代码,index.js放置react组件代码,asse

webpack入门详解

webpack入门详解(基于webpack 3.5.4  2017-8-22) webpack常用命令: webpack --display-error-details    //执行打包 webpack -w               // 提供watch方法:实时进行打包更新 webpack -p           // 对打包后的文件进行压缩 webpack -d            // 提供source map,方便调式代码 webpack -dev-server --open 

webpack 入门(0)(官翻)

0 建议最好全局先安装一下webpack npm install webpack -g 1 新建一个文件夹,打开该文件夹,初始化package.json文件,安装好webpack依赖 (都是基础的linux命令操作,必会) mkdir webpack-demo && cd webpack-demo //新建webpack-demo文件夹并打开该文件 npm init -y //初始化package.json文件,-y可以省去一大通的默认回车设置 npm install --save-dev