Hilshire
Hilshire

webpack初探：用webpack进行react开发

webpack是当下较为火爆的前端构建工具。它类似一个黑盒，可以较为轻松地帮我们解决一些前端构建的重复工作。在某种程度上，它可以代替gulp的功能。但是，想要获得最佳的前端构筑体验，恐怕还是得gulp+webpack才行。

webpack学习起来不算太难，至少在我看来比gulp轻松。它通过配置文件webpack.config.js搭配合适的插件工作。

学习webpack+react，推荐这篇教程：Webpack傻瓜指南（三）和React配合开发。文章中有前两篇的地址。这三篇文章十分优秀，学习之后相信可以比笔者玩得溜(●'◡'●)这里只粗略记录一些心得。

npm

npm是node集成的包管理工具，由package.json配置。可以用"script"选项自定义命令。通过npm install * --save安装的包会成为程序依赖，npm install * --save-dev则会成为开发依赖。它们分别被记录在dependencies和devDependencies中。

在运行npm install时会默认安装两种包。你也可以使用npm install --production来只安装运行依赖包。

webpack核心

入口和出口

webpack配置大体可以分为入口、出口和处理器。一个最简单的webpack配置文件是这样的：

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

它没有处理器，所以没有任何用处。但是，它已经可以正常运行。你可以这样使用它：

  • webpack开发环境下编译
  • webpack -p产品编译及压缩
  • webpack --watch开发环境下持续的监听文件变动来进行编译(非常快!)
  • webpack -d引入source maps

处理器

react和es6语法

webpack使用各种loader和perset来处理文件。它可以替代browserify或者RequireJS的功能。现在，假设我们要用webpack加载和编译CoffeeScript和JSX+ES6。在开始之前确保你安装了react和react-dom

首先，安装loader和其它插件：npm install coffee-loader babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

babel-core是babel汇编核心。es2015 preset则可以把es6语法的js代码转换为es5代码。

现在，我们可以写模块代码了。我们的配置文件变成了这样：

// webpack.config.js
module.exports = {
  entry: './main.js', // 入口文件
  output: {
    filename: 'bundle.js' // 打包输出的文件
  },
  module: {
    loaders: [
      {
        test: /\.coffee$/,  // test 去判断是否为.coffee的文件,是的话就是进行coffee编译
        loader: 'coffee-loader'
      },
      {
        test: /\.js$/, // test 去判断是否为.js,是的话就是进行es6和jsx的编译
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

如果你希望在require文件时省略扩展名，只需要添加resolve.extensions即可

...
resolve: {
    // 现在你require文件的时候可以直接使用require('file')，不用使用require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee']
 }
...

现在，我们可以进行react编程了

css样式和图片

同样的，只要有loader就行了。首先用require()去加载它们

require('./bootstrap.css');
require('./myapp.less');

var img = document.createElement('img');
img.src = require('./glyph.png');

接着配置webpack.config.js

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    path: './build', // 图片和js会放在这
    publicPath: 'http://mycdn.com/', // 这里用来生成图片的地址
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用!去链式调用loader
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联的base64的图片地址，图片要小于8k，直接的url的地址则不解析
    ]
  }
};

当你require了CSS(less或者其他)文件，webpack会在页面中插入一个内联的