webpack 入门教程

转载 2016年05月30日 22:49:24

转载: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
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

相关文章推荐

Webpack5分钟入门教程

Webpack5分钟入门教程 前面讲解了avascript模块化编程:模块的写法,下面我们来介绍一个具体的moduleloader—Webpack。  我们新建三个js文件,module1.js mo...

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)

vue入门之路篇系列教程: vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一) vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(二...

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一)

vue入门之路篇系列教程: vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一) vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(二...

webpack入门教程

Webpack是什么? Webpack是当下比较热门的前端资源模块化管理和打包工具。对于webpack来讲一切资源皆模块,它可以把诸如JS(含JSX)、coffee、样式(含less/sass)、图片...

webpack 教科书式入门教程

最近刚用完gulp又来捣鼓捣鼓webpack,这只是个简单的新手入门教程...不多说; 注意:安装webpack前检查nodejs的安装目录路径是否存在空格(Program Files (x86))...

WebPack详细入门教程(一)之简介

WebPack详细入门教程之简介1、什么是WebpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sc...

webpack傻瓜入门教程

webpack傻瓜入门教程
  • lidysun
  • lidysun
  • 2017年02月13日 15:22
  • 802

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(四)

前言通过前面几篇教程,我们已经顺利搭建起来了项目,并且已经组建好路由了,安装了我们需要的sass的模板。本章节,我们需要做一个列表页面,为了方便起见,决定使用获取 http://cnodejs.org...

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(五)

前言通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了。制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了。在vue中,我们使用vue-route...

Webpack2 入门踩坑教程(五)

注:非原创,原文来自:http://blog.csdn.net/alanfancy/article/details/64444204 本人通过此链接博客学习,并在此基础上增加自己的想法。上节Web...
  • Echo601
  • Echo601
  • 2017年07月27日 15:43
  • 92
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack 入门教程
举报原因:
原因补充:

(最多只允许输入30个字)