webpack入门(译)

本文由官方Tutorial Getting Started整理翻译，由于该指南解决了我在上手webpack过程当中遇到的诸多问题。因此在这里推荐给各位新手们~

 

WELCOME

　　这份指南始终围绕一个简单例子。经过学习本教程你能够学到：

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

安装WEBPACK

　　首先你须要安装有node，而后执行

     npm install webpack -g 

这会使webpack命令生效

开始

　　咱们从一个空文件夹开始，首先建立如下文件

　　而后在该文件夹根目录下执行如下命令：

 webpack ./entry.js bundle.js

　　这会编译你的entry.js文件并生成bundle.js。假若成功，将有如下信息输出：

 

 

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

再添加一个文件

　　接下来，咱们会添加一个新文件，并加入以下代码。

 

　　再执行如下命令

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

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

绑定LOADER

　　咱们不但愿老是敲下如此冗长的require("!style!css!./style.css");，因此咱们能够绑定文件的扩展名以简化写法为require("./style.css")。

 

　　执行如下的编译命令：

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

　　你将看到一样的结果。

配置文件

　　咱们能够将配置选项写入配置文件中。

　　此后，仅需执行：

webpack

　　来编译

 

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