关闭

webpack 入门教程

标签: webpack
1627人阅读 评论(0) 收藏 举报
分类:

转载:http://www.jianshu.com/p/1c4fd72b84e8

本文由官方Tutorial Getting Started整理翻译,因为该指南解决了我在上手webpack过程中遇到的诸多问题。

我是一名初级前端开发者,我的博客:if-true.com,欢迎交流。


WELCOME

这份指南始终围绕一个简单例子。通过学习本教程你可以学到:

  • 如何安装webpack
  • 如何使用webpack
  • 如何使用loader
  • 如何使用开发服务器

安装WEBPACK

首先你需要安装有node,然后执行

npm install webpack -g

这会使webpack命令生效

开始

我们从一个空文件夹开始,首先创建以下文件


image

然后在该文件夹根目录下执行以下命令:

webpack ./entry.js bundle.js

这会编译你的entry.js文件并生成bundle.js。倘若成功,将有以下信息输出:


image

用浏览器打开index.html,会出现It works.

再添加一个文件

接下来,我们会添加一个新文件,并加入如下代码。


image

再执行以下命令

webpack ./entry.js bundle.js

刷新浏览器,此时你会看到文字变为"It works from content.js."

webpack会分析你入口文件对于其他文件的依赖,这些文件(通常称为模块)也会被包含在bundle.js中。

第一个LOADER

我们希望为我们的应用添加css文件。webpack原生仅支持JavaScript,所以我们需要css-loader来处理css文件,同时我们也需要style-loader来应用这些样式。

运行npm install css-loader style-loader来安装这些loader(此处使用局部安装而非全局安装),这会在你的目录下生成node_modules文件夹。

需要改动的文件如下:


image

再次编译并刷新浏览器你会看到应用的背景变为黄色。


image

绑定LOADER

我们不希望总是敲下如此冗长的require("!style!css!./style.css");,所以我们可以绑定文件的扩展名以简化写法为require("./style.css")


image

执行以下的编译命令:

webpack ./entry.js bundle.js --module-bind 'css=style!css'

你将看到同样的结果。

配置文件

我们可以将配置选项写入配置文件中。


image

此后,仅需执行:

webpack

来编译


image

webpack命令总会尝试载入当前目录的webpack.config.js文件

更友好地输出

随着项目的增长,编译过程可能会越来越长,所以我们可以展示一些进度条以及增加配色来实现更友好地输出。我们可以通过以下命令达到目的:

webpack --progress --colors

监听模式

当我们不希望在文件改动后手动执行编译操作时

webpack --progress --colors --watch

开发服务器

提供开发服务器是非常好的一项服务,可以替换python -m SimpleHTTPServer启用HTTP静态服务器

通过以下命令全局安装

npm install webpack-dev-server -g

启动服务器

webpack-dev-server --progress --colors

这会绑定一个小型express服务器到localhost:8080,来为你的静态资源及bundle(自动编译)服务。通过访问http://localhost:8080/webpack-dev-server/bundle,bundle每次重编译后浏览器页面都会自动更新。



文/anthozoan77(简书作者)
原文链接:http://www.jianshu.com/p/1c4fd72b84e8
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
0
0
查看评论

webpack超详细配置, 使用教程(图文)

博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在...
  • c_kite
  • c_kite
  • 2017-05-06 19:22
  • 27023

webpack傻瓜入门教程

webpack傻瓜入门教程
  • lidysun
  • lidysun
  • 2017-02-13 15:22
  • 1183

WebPack系列教程(十):起步

欢迎这个小教程将指导您完成一个简单的例子。您将学到: 如何安装webpack 如何使用webpack 如何使用loaders 如何使用开发服务器 安装WEBPACK首先你必须安装node.js。$ npm install webpack -g设置THE COMPILATION首先得有一个空目录创建以...
  • zzzkk2009
  • zzzkk2009
  • 2016-03-09 18:04
  • 4687

Webpack2 完整踩坑教程(七)

**Webpack的核心哲学思想 ** 1.一切都是模块——就像JS文件可以视作“模块”一样,其他所有的一切(CSS,图片,HTML)都可以被视作模块,通过require加载。。 2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件,并且会一直不停进行加载!所以Webpac...
  • alanfancy
  • alanfancy
  • 2017-03-22 09:41
  • 1548

webpack教程

  • 2017-09-16 08:40
  • 855KB
  • 下载

webpack的使用-基础

webpack的使用1. webpack的安装npm install webpack -g npm install webpack --save-dev2. webpack的使用比如有一个入口文件entry.js,我们将entry.js文件编译打包到bundle.js中,那么命令就是 webp...
  • wallowyou
  • wallowyou
  • 2017-06-29 18:36
  • 334

深入浅出的webpack3入门教程

webpack3的相关介绍和剖析,还附带详尽的代码示例。
  • gg_18826075157
  • gg_18826075157
  • 2017-11-11 20:05
  • 366

Webpack入门教程

写在前面的话http://www.jianshu.com/p/42e11515c10f 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你...
  • sinat_17775997
  • sinat_17775997
  • 2016-08-17 09:16
  • 720

webpack安装

第一步、 先去安装node环境,http://nodejs.org 第二步、安装好node之后安装npm【npm比较慢,建议使用淘宝镜像:cnpm】  安装 webpack,以全局的方式安装: 1 $ npm install webpack -g   ...
  • u014033756
  • u014033756
  • 2017-06-17 23:53
  • 277

webpack视频教程及源码百度云盘下载地址

  • 2018-02-08 10:46
  • 43B
  • 下载
    个人资料
    • 访问:1197498次
    • 积分:16484
    • 等级:
    • 排名:第746名
    • 原创:473篇
    • 转载:342篇
    • 译文:3篇
    • 评论:41条
    博客专栏