Webpack 初上手

前端世界风起云涌,现在最火的应该就是React,而在14年instagram开发者介绍了构建React项目的前端工程化工具 — — Webpack。可以参看 webpack-howto

而我对于Webpack的入门是看了另一份文档,因为有中文版。参看 react-webpack-cookbook

一天时间看下来,Webpack到底干了些什么事情呢?

首先,Webpack实现了前端模块化编程,可以用写nodejs的方式来写前端代码,可以requrie进来nodejs浩如烟海的现成lib,这几乎改变了前端编程的方式。

ES6 模块

import MyModule from './MyModule.js';

CommonJS

var MyModule = require('./MyModule.js');

AMD

define(['./MyModule.js'], function (MyModule) { });

其次的作用就是项目打包的功能,像Grunt,Gulp所做的事情,而Webpack是通过loader来实现的。

列举几个必用的loader:

  • css-loader!style-loader 这是加载css代码的loader,npm install css-loader style-loader — save-dev。如果是用less或sass来写css,还有less-loader和sass-loader可以用,安装方法也是一样的。
  • url-loader npm install url-loader — save-dev来安装加载器,它会把需要转换的路径变成 BASE64 字符串,在其他的 Webpack 书中提到的这方面会把你 CSS 中的 “url()” 像其他 require 或者 import 来处理。意味着如果我们可以通过它来处理我们的图片文件。
  • babel-loader 这是我最喜欢,也算是最重要的loader了,有了它可以转换react的jsx文件,但更重要的是,有了它就可以用ES6来写React代码了,真的是很爽。

另外,还有一些Webpack的特色功能,比如多重入口,可以通过下面代码感受一下:

webpack.config.js

var path = require('path'); var webpack = require('webpack'); var node_modules_dir = path.resolve(__dirname, 'node_modules'); var config = { entry: { app: path.resolve(__dirname, 'app/main.js'), mobile: path.resolve(__dirname, 'app/mobile.js'), vendors: ['react'] }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { loaders: [{ test: /\.js$/, exclude: [node_modules_dir], loader: 'babel' }] }, plugins: [ new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js') ] }; module.exports = config;

还有就是懒加载入口的功能,比如

main.js (使用 ES6 语法)

import React from 'react'; import Feed from './Feed.js'; class App extends React.Component { constructor() { this.state = { currentComponent: Feed }; } openProfile() { require.ensure([], () => { var Profile = require('./Profile.js'); this.setState({ currentComponent: Profile }); }); } render() { return ( return <div>{this.state.currentComponent()}</div> ); } } React.render(<App/>, document.body);

以上是我看了一天Webpack的粗浅体会,肯定还是很肤浅很初级,但重点在于记录这个开始,以后要多多用Webpack+react+ES6写一些应用,应该会很好用。

最后是我写了一个webpack+react的练手之作,献丑GitHub


Originally published at mrdream24.github.io on August 18, 2015.