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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.