Choosing a Build Tool – Babel, Browserify, Webpack, Grunt and Gulp
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
When starting a new
project, one of the first things you’ll do is set up a build system. But with so many options, deciding on tools often gets in the way of building the app itself.
Imagine if there was a simple rule you could follow to choose which build tools to use – wouldn’t it be great being able to just get stuck into writing your app
? Actually, after spending five years writing apps with automatic build systems, I’ve come upon just such a guide. I know what to use and where to use it — and after reading this article, you will too!
Want a boilerplate for your Single Page App with my recommended build system? Check out the Unicorn Standard React/Redux Boilerplate
The Short Answer
It is easy to decide which tools you need:
Small projects can get away with just an ES6 compiler
Single Page Apps need a module bundler too
Once your app is in production, use a task runner to automate anything else
And here are the packages which fulfil these requirements:
For compiling and polyfilling ES6, use Babel
For bundling your JavaScript files and dependencies into static assets, use Webpack
If your have other tasks like renaming files to avoid caching or publishing to the web, automate them with Gulp
But why are these tools the right ones for the job?
The Details
To get the above answer, I looked at the strengths and weaknesses of a number of popular JavaScript build tools. Since compilers are the thing you’ll definitely need, let’s start with them.
ES5 JavaScript is not the prettiest
of languages. ES6 and ES7 improve things a lot, but that doesn’t help when the browsers are stuck in the past.
Luckily, a number of enterprising engineers have built compilers which turn new
JavaScript into old
JavaScript! Some even added extra features – like Microsoft’s TypeScript
. But if we limit ourselves to standardised JavaScript, there is one tool which stands head and shoulders above the rest: @sebmck’s Babel
If there is one tool you should learn to use after reading this guide, it is Babel.
Babel isn’t full of surprises – it just transforms ES6 to ES5 as you’d expect. But the wonderful thing about Babel is that it also allows you to add your own
transforms – and the community has created a lot of them. In particular, Babel has transforms for ES7 features like async
and decorators. It also transforms your React JSX.
But while Babel is great at transforming JavaScript, it can’t do anything else. In fact, it can’t even bundle together multiple files using ES6’s import
and export
statements. Which is why you’ll also need a module bundler.
Module bundlers
Most projects of any scale will have their code split between a number of files. And while you could
just include each file with an individual &script&
tag, you’d then be in charge of manually ordering them based on dependencies. Computers can do that better than you can, and that
is why you should use a tool to automatically bundle everything into a single file.
While the internet has spawned a bewildering array of module bundling tools, there are two which dominate the landscape: Browserify
, and Webpack
Browserify
Browserify is a tool for bundling Node packages for the browser. It also
happens to work for browser-based apps pretending to be Node packages.
This Node-centric philosophy has
bundling an app with Browserify is simple
, you can using built-in Node modules like path
, and you can use any code you’ve written for Node as is. The downside, of course, is that your Single Page App will generally need types of resources that Node apps won’t: CSS, images and fonts.
But this isn’t much of a downside, because a number of people have written plugins which teach Browserify to handle these resources too. There are plugins which let you transform ES6 to ES5, bundle CSS, split your bundle into multiple files, and even make you sandwiches
. But given that these plugins are cajoling Browserify into doing something it wasn’t designed for, the configuration can get a little messy.
So while Browserify is a wonderful tool for bundling node modules for the browser, if you’re writing a Single Page App then you may prefer a tool designed for bundling anything
Webpack is a tool which takes JavaScript modules with dependencies and bundles them into files. It doesn’t give a hoot what those dependencies are, as long as they’re JavaScript modules.
As long as they’re JavaScript modules?!
That means no CSS and no Images, right? Well, kind of – but not really – because Webpack has a wonderful way of turning anything into JavaScript modules: loaders.
Loaders are transformations that are applied to resource files. They can use anything
for their input and output, not just JavaScript. They’re also chainable, which lets you do things like transforming your SCSS files to CSS before then transforming your CSS into a JavaScript module. And tada
, Webpack can bundle a JavaScript module!
If Webpack has a downside, it is that a number of popular boilerplate projects include enormous
configuration files which scare people off. But you won’t have that problem, because you can skip the boilerplates with my guide to configuring Webpack with Babel in 26 lines
So now you know how to use module bundlers to produce a couple of static asset files. But what do you do
with those files? That is where task runners come in.
Task runners
Task runners are tools for defining and running tasks. What do I mean by tasks? Simple: anything you might manually do from the command line.
Now it is important to understand that just because you can
write a task for something, doesn’t mean that you should
write that task. For example, it is possible to manually write tasks to bundle your modules. But assuming you delegate this to Webpack (as you should), you still need to start Webpack
. And that is a task
Other common tasks which can’t be handled by your module bundler include inserting &script&
tags for your generated asset files, and publishing your new build to the web.
After reading this, you may be thinking “but I already know how to run tasks with GNU Make”. And if you’ve been around for a while, there is absolutely nothing wrong
with continuing to use what you know. But if you don’t
have a preferred tool then it makes sense to learn one which other JavaScript developers use. And that means picking Grunt or Gulp.
Grunt is a tool for running tasks which you’ve defined. And so it might surprise you that out of the box it basically can’t do anything
The reason for this is that Grunt tasks are not defined with JavaScript code, but with c they’re defined declaratively
. And in order to keep the core Grunt package to a reasonable size, each of these configurations objects are handled by plugins
– from watching for changes, to copying and concatenating files.
This does there are thousands of plugins, and you can often find one which does what you want without writing any code. The major issue is that if you do
want to do something a little unusual, you can’t just write a task in plain ol’ JavaScript. Instead, you’ll have to write your own plugin. And then hope that nobody else ever has to look at your huge configuration file which is littered with obscure options for unmaintained plugins.
Gulp, like Grunt, is a tool for defining and running tasks.
The major difference between Grunt and Gulp is that where Grunt defines tasks declaratively using configuration objects, Gulp defines tasks as JavaScript functions. And since Gulp knows how to handle functions which return streams
andpromises, you have a lot of flexibility in how you write your tasks.
Gulp, like Grunt, has a massive plugin library. But seeing Gulp tasks are just plain old functions, you’ll find you can also use a lot of vanilla node modules for your Gulp tasks too.
The biggest issue people have with Gulp is that streams and promises can be a little hard to grok at first. But this is
the practice you’ll get from using them will allow you to better apply them across your other code too.
Configuring the tools
And now you know which tools to use! Of course, it isn’t enough to just know which
tools you need. You also need to know how
to use them. And as it happens, you’re in luck! I’m currently writing a guide to setting up Webpack and Gulp for your React-based Single Page Application. Get on my newsletter now to make sure you don’t miss it!
In return for your e-mail address, you’ll also immediately receive three print-optimised cheatsheets for React (see preview), ES6 and JavaScript promises – for free
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
成功更容易光顾磨难和艰辛，正如只有经过泥泞的道路才会留下脚印！
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net马上开始写 react & ES6 --- 基于gulp 和 Babel 的脚手架
来源：open开发经验库
来自： 
我对 react 很有兴趣，但是我发现想写 react 不容易。
我需要在开始写代码之前做很多准备工作，我需要编译jsx文件，引入react等等，而最新的react示例，有鼓励ES6来书写代码，可以用上ES6的一些闪亮的新特性，所以与其每次写代码配置工具花很多时间，不如写成一个github repo，每次只需要 clone下来，会方便很多。
于是我马上动手，有了这个
，本意是自己用，现在也推荐给大家，也希望大家积极指出不足，提出建议，当然如果有更好的方案，也可以推荐给我。 
使用了Babel，这样可以用ES6来书写react代码。
使用了Gulp和browserify，可以使用CommonJS规范来写代码，当然更推荐使用ES6 module。
使用了watchify，在 gulp watch 之后浏览器会自动打开网页，同时在修改代码之后会自动刷新代码，方便开发和调试。 
如何使用
首先，你需要安装node和npm（我相信你一定已经安装了），然后你可以按照下面的命令来clone这个repo，同时安装依赖：
$ git clone :mrdream24/react-babel-gulp-boilerplate.git &yourAppName&
$ cd &yourAppName&
$ npm install 
然后你可以“启动”它,来进行开发和调试：
$ gulp watch 
这时候会自动打开浏览器新窗口 http://localhost:3000 ,然后你会看到 Hello World 。 
最后如果你想打包代码，可以：
$ gulp build 
希望大家多多支持，多多指出不足，提出建议。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动自由、创新、研究、探索
Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件开发]锐意进取，志存高远.成就梦想，只争朝夕.从你开始，创新世界.【That I exist is a perpetual supprise which is life. Focus on eCommerce】
23:02 by 龙恩0707,&175&阅读,&
30分钟手把手教你学webpack实战
什么是webpack? 他有什么优点？
& &&首先对于很多刚接触webpack人来说，肯定会问webpack是什么？它有什么优点？我们为什么要使用它？带着这些问题，我们来总结下如下：
&&&&Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：
支持commonJS和AMD模块。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
更多等等。。。带着这些问题我们慢慢来学习webpack。
二：如何安装和配置
首先我的项目目录结构是：文件名叫webpack，里面只有一个main.html，代码如下：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&script src="src/react.min.js"&&/script&
&div id="content"&&/div&
&script src="build/build.js"&&/script&
还有一个文件夹src，该文件夹存放了二个js文件；react.min.js源文件和main.js文件，main.js源码如下：
/* 内容区模块代码 */
var ContentMode = React.createClass({
render: function(){
&div className="ContentMode"&
&div class="contents"&{this.props.contents}&/div&
{this.props.children}
/* 页面div封装 上面三个模块 */
var Page = React.createClass({
render: function(){
&div className="homepage"&
&ContentMode
contents ="longen"&this is one comment&/ContentMode &
&ContentMode
contents ="longen2"&this is two comment&/ContentMode &
/* 初始化到content容器内 */
React.render(
React.createElement(Page,null),document.getElementById("content")
该代码是React.js代码，是react.js入门学习一中的代码复制过来的&为了演示；
安装步骤如下：
生成package.json文件；
首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行如下命令：npm&init
如上通过一问一答的方式后会在根目录下生成package.json文件，如下所示：
2 .&通过全局安装webpack
执行命令如下：npm&install&-g&webpack&如下所示：
在c盘下会生成node_modules文件夹中会包含webpack，此时此刻我们可以使用webpack命令了；
3.&配置webpack
每个目录下都必须有一个webpack.config.js，它的作用就好比Gulpfile.js、或者&Gruntfile.js，就是一个项目配置，告诉webpack需要做什么。
如下是我的webpack.config.js代码如下：
module.exports = {
entry: "./src/main.js",
filename: "build/build.js"
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: "style!css" },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/,
loader: "jsx-loader" }
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
entry&是页面中的入口文件，比如我这边的入口文件时main.js
output:&是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；
resolve:&定义了解析模块路径时的配置，常用的就是&可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，会自动补全。
plugins:&定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.
module.loaders：是文件的加载器，比如我们之前react需要在页面中引入jsx的js源码到页面上来，然后使用该语法，但是通过webpack打包后就不需要再引入JSXTransformer.js；看到上面的加载器；比如jsx-loader加载器就是代表JSXTransformer.js的，还有style-loader和css-loader加载器；因此在使用之前我们需要通过命令把它引入到项目上来；因此需要如下命令生成下；
jsx-loader加载器&npm&install&jsx-loader&--save-dev&如下：
Style-loader加载器&npm&install&style-loader&--save-dev&如下：
css-loader&加载器&npm&install&css-loader&--save-dev&如下：
局部安装webpack&执行命令：npm&install&webpack&--save-dev
我们这边干脆把gulp的全局安装和在项目中局部安装也安装下，稍后有用~
Gulp全局安装&npm&install&-g&gulp&如下：
在项目文件内，gulp局部安装&使用命令&npm&install&gulp&--save-dev&如下所示：
因此在我们文件夹node_modules下生成文件如下：
现在我们来执行命令&&如下所示：
&即可在根目录下生成一个build文件夹中build.js 如下所示：
我们还可以使用如下命令：webpack&--display-error-details&命令执行，这样的话方便出错的时候可以查看更详尽的信息；比如如下：
现在我们再来刷新下页面；看到如下：
可以看到页面渲染出来了，我们接着来看看页面中的请求：
可以看到只有一个文件react.min.js的源文件和build.js&我们刚刚生成的build.js文件了，因此我们通过webpack进行打包后，我们现在就不再需要和以前一样引入JSXTransformer.js了。我们还可以看看build.js内生成了那些js，这里就不贴代码了，自己可以看看了~
上面是使用webpack打包；现在我们再来看看使用第二种方案来打包~
使用gulp来进行打包
我们知道使用gulp来打包的话，那么我们需要在根目录下需要新建&Gulpfile.js；
因此我们这边Gulpfile.js的源码如下：
var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
gulp.task('webpack', function () {
var myConfig = Object.create(webpackConfig);
return gulp
.src('./src/main.js')
.pipe(webpack(myConfig))
.pipe(gulp.dest('./build'));
// 注册缺省任务
gulp.task('default', ['webpack']);
然后webpack.config.js代码变为如下：
module.exports = {
entry: "./src/main.js",
filename: "build.js"
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: "style!css" },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/,
loader: "jsx-loader" }
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
即可，然后再在命令行中输入gulp即可生成build/build.js了；如下所示：
Github上的代码如下：&&&自己可以把压缩包下载下来运行下即可。
三：理解webpack加载器
& &&Webpack提供了一套加载器，比如css-loader,less-loader,style-loader，url-loader等，用于将不同的文件加载到js文件中，比如url-loader用于在js中加载png/jpg格式的图片文件，css/style&loader用于加载css文件，less-loader加载器是将less编译成css文件；
配置加载器
module.exports = {
entry: "./src/main.js",
filename: "build.js",
path: __dirname + '/assets/',
publicPath: "/assets/"
loaders: [
{test: /.css$/, loader: 'style!css'},
{test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
resolve: {
extensions: ['', '.js', '.jsx'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
a : 'js/assets/a.js',
// 后面直接引用 require(&a&)即可引用到模块
b : 'js/assets/b.js',
c : 'js/assets/c.js'
plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
module.loader:&其中test是正则表达式，对符合的文件名使用相应的加载器.&
/.css$/会匹配&xx.css文件，但是并不适用于xx.sass或者xx.css.zip文件.
url-loader&它会将样式中引用到的图片转为模块来处理;&配置信息的参数&?limit=8192&表示将所有小于8kb的图片都转为base64形式。
entry&模块的入口文件。依赖项数组中所有的文件会按顺序打包，每个文件进行依赖的递归查找，直到所有模块都被打成包；
output：模块的输出文件，其中有如下参数：
filename:&打包后的文件名
path:&打包文件存放的绝对路径。
publicPath:&网站运行时的访问路径。
relolve.extensions:&自动扩展文件的后缀名，比如我们在require模块的时候，可以不用写后缀名的。
relolve.alias:&模块别名定义，方便后续直接引用别名，无须多写长长的地址
plugins&是插件项;
四：理解less-loader加载器的使用
& &&我们先来理解下less-loader加载器，其他的sass-loader也是一个意思，这边不会对所有的预处理的css做讲解，less-loader加载器是把css代码转化到style标签内，动态插入到head标签内；我们先来看看我项目的结构如下：
我们现在css文件下有一个main.less 代码如下：
@base: #f938
html,body {
background:@
Src文件下有一个main.js文件&此js文件时入口文件；里面的代码如下：
require('../css/main.less');
webpack.config.js&代码配置如下：
module.exports = {
entry: "./src/main.js",
filename: "build.js",
path: __dirname
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
test: /\.less$/,
loader: "style!css!less"
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
Gulpfile.js代码如下(注意：这边既可以需要此文件使用gulp进行运行打包，也可以不需要此文件，直接使用webpack进行打包；二种方式任选其一)。
var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
gulp.task('webpack', function () {
var myConfig = Object.create(webpackConfig);
return gulp
.src('./src/main.js')
.pipe(webpack(myConfig))
.pipe(gulp.dest('./build'));
// 注册缺省任务
gulp.task('default', ['webpack']);
因此我们需要安装&style-loader&css-loader&和&less-loader&如下所示：
&安装完成后，我们查看我们的项目的根目录node_modules下多了如下几个文件：
如上配置后，我们进入项目后&运行下&gulp或者&webpack命令既可，在build文件夹内会生成build.js，此JS是动态生成style标签并解释正常的css插入到文档head标签内；我们可以运行下页面，查看代码看下如下：
因此我们可以看到页面生效了；为了更好的demo测试，我把代码放到如下github上，自己可以下载下来运行下既可：
五：理解babel-loader加载器的含义
babel-loader加载器能将ES6的代码转换成ES5代码，这使我们现在可以使用ES6了；我们在使用之前，我们需要安装babel-loader
执行命令：npm&install&babel-loader&&save-dev&如下所示：
如上安装完后，我们在根目录node_modules会生成文件，如下所示：
现在我们可以在webpack.config.js里面moudle.loaders配置加载器了，如下代码：
{test:&/\.js$/,&loader:&'babel',&exclude:&'/node_modules/'}&
因此webpack.config.js代码变成如下：
// 使用webpack打包
module.exports = {
entry: "./src/main.js",
filename: "build.js",
path: __dirname
loaders: [
{test: /\.js$/, loader: 'babel', exclude: '/node_modules/'}
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
下面我们再来看看我项目中的目录结构如下：
我们在看看src源文件有下面几个文件
React.min.js是react源码，这个不多说，bind.js的ES6的代码如下：
// es6的语法 let LOADER = module.exports = LOADER;
main.js 是页面的入口文件；代码如下：
let loader = require('./bind');
console.log(loader);
let是ES6的语法&相当于js中的var定义变量的含义；&接着打印下bind模块中&打印为true；
最后执行gulp如下：
在控制台中打印true；我把源码放在github上，有需要的同学可以自己下载下来运行下即可；如下github(我2年没有使用github，现在重新使用，为了更好的演示demo问题)；&
六：了解下webpack的几个命令
webpack&&&&&&&&&//&最基本的启动webpack的方法
webpack&-w&&&&&&//&提供watch方法；实时进行打包更新
webpack&-p&&&&&&//&对打包后的文件进行压缩
webpack&-d&&&&&&//&提供source&map，方便调式代码
我们下面来了解下&webpack&-w
如下所示：
比如我在js文件里面随便增加一点代码后，保存后，再刷新页面即可可以看到代码生效了，无需重新运行webpack或者gulp，使用webpack -w 可以实时打包。 webpack -p 的含义是对进行打包后的文件进行压缩代码；比如我在之前使用chrome看打包后的代码如下：
如上可以看到，代码是未压缩的，但是当我在控制台命令行中运行&webpack&-p&命令后，如下所示：
我们现在再到控制台上看下代码变成已经压缩后的代码了，如下所示：
webpack&&-d&是提供未压缩之前的源码&方便代码中的调式；如下所示：
当我运行如上所示后，我们再来看看刚才已经压缩后的代码变成什么样子呢？如下所示：
如上代码可以看到&我们进行压缩后的代码，通过运行&webpack&-d&命令后，即可还原未压缩的代码，这样的话就可以方便我们线上调式代码了。
我们再来看看目录下&会生成map文件，如下所示：
七：webpack对多个模块依赖进行打包
& &通过一刚开始我们了解到&webpack支持commonJS和AMD两种模块机制进行打包，因此我们现在来针对代码中使用commonJS和AMD机制进行做一个demo；
Src源文件增加module1.js&module2.js&module3.js&代码分别如下：
module1.js 代码：
// module1.js
require(["./module3"], function(){
console.log("Hello Webpack!");
Module2.js代码如下：
// module2.js，使用的是CommonJs机制导出包
module.exports = function(a, b){
return a +
Module3.js代码使用AMD机制
// module3.js，使用AMD模块机制
define(['./module2.js'], function(sum){
return console.log("1 + 2 = " + sum(1, 2));
// 入口文件 main.js 代码如下：
require("./module1");
我们可以运行下&webpack后&在根目录下生成如下文件：
其中1.build文件夹是commonJS生成的 里面是commonJS的代码；我们再查看页面的代码如下可以看到：
我们继续查看控制台输出如下：
为止我们可以看到webpack打包可以支持commonJS模块和AMD模块。
具体的代码&可以查看我的github上的源码：
八：如何独立打包成样式文件
& &&有时候我们不想把样式打在脚本中，而是想独立css出来，然后在页面上外链css，这时候我们需要&&来帮忙：我们首先需要安装&：如下：&npm&install&extract-text-webpack-plugin&&save-dev&如下所示：
然后在目录下会生成如下：
现在我们需要看看webpack.config.js&配置变成如下：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 使用webpack打包
module.exports = {
entry: "./src/main.js",
filename: "build.js"
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap!' +
'less?sourceMap'
resolve: {
extensions: ['', '.js', '.jsx']
// 内联css提取到单独的styles的css
plugins: [new ExtractTextPlugin('styles.css')]
配置完成后&我们gulp运行下即可，在build文件夹内会生成2个文件，一个是build.js&处理模块的文件&另一个就是我们的styles.css了；我们查看下如下所示：
接着在html文件这样引入即可：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&script src="src/react.min.js"&&/script&
&link rel="stylesheet" href="build/styles.css"/&
&div id="content"&&/div&
在页面上运行以下；即可看到效果：我们可以看下请求数：
具体的代码demo可以看我的github&如下：
注意：node_modules模块没有上传上去，git上传不上去，老是提示Filename&too&long的错误，所以就没有上传，需要自己在本地安装如下模块：
九：如何打包成多个资源文件
& &&我们在开发页面的时候，有时候需要有多个入口文件，做到文件是按需加载，这样就可以使用缓存提升性能；那么我们接下来需要如何配置呢？现在我们继续做demo，现在比如我现在的项目文件结构如下：
我们直接看 webpack.config.js配置代码变成如下：
module.exports = {
"main": "./src/main.js",
"index": "./src/index.js"
filename: "[name].bundle.js"
从上面的配置代码我们可以看到&entry现在变成了一个对象了，而对象名也就是key会作为下面output的filename属性的[name]。当然entry也可以是一个数组。
因此我们直接&gulp运行下即可&在build文件下&生成2个入口文件&如上面的截图所示：github源码地址如下：
现在我们可以根据不同的页面&引入不同的入口文件，实现按需加载文件。
十：关于对图片的打包
我们知道图片是使用url-loader来加载的，我们既可以在css文件里url的属性；如下：
background:url('../images/1.jpg') no-
我们还可以直接对元素的src属性进行require赋值。如下代码：
var img = document.createElement("img");
img.src = require("../image/1.jpg");
document.body.appendChild(img);
我这边直接来讲第一种在css文件里的url属性进行打包；
首先来看看我项目的目录结构如下：
Css文件&main.css代码如下：
background:url('../images/1.jpg') no-
JS文件main.js代码如下：
require('../css/main.css');
Webpack.config.js配置文件代码如下：
// 使用webpack打包
module.exports = {
"main": "./src/main.js"
path: './build/',
filename: "build.js"
loaders: [
{test: /.css$/, loader: 'style!css'},
{test: /.(png|jpg)$/, loader: 'url?limit=8192'}
直接运行webpack&可以生成build目录，build目录下会生成2个文件&一个是图片打包后，另外一个是build.js。接着我们再在页面运行下页面，发现有一个问题，如下：
页面调用图片的url是根目录下的，不是我打包后的 build文件夹下，所以会导致图片路径找不到的问题；因此这边有一点点没有完成的任务，希望有兴趣的童靴可以帮助完成~ 不过图片确实是已经打包好了，为了方便，我们还是提供github源码吧！如下所示：
十一：React开发神器：react-hot-loader
&待续..... 由于篇幅有限~~ &这个留给下篇文章讲解。
阅读(...) 评论()
随笔 - 15530
评论 - 1182