用webpack来取代browserify

本来打算一心跟着browserify走的,但是无奈它的transform机制令人烦躁。今天有这么一个需求,配置了一会,感觉用browserify搞不定。

一个react项目,我的jsx文件需要编译,于是jsx中会require('react'),但是我又不想在输出的bundle.js中包含react那1.5W行的代码,原因有二:

  • 输出代码太多,分散我的注意力
  • 业务代码就那么点,却需要对整个react进行解析,速度太慢

于是我找到了browserify + literalify的解决方案,无奈的是始终无法搓合browserify + reactify + literalify,只得放弃。

开始尝试其竞品webpack,webpack做为一个专业的面向web的打包工具,拥用了一系列browserify不具备的,得依靠插件才能完成的事情。

在webpack中完成我的需求就非常简单了,只须要一个webpack.config.js文件说明一下配置项即可:

module.exports = {
    // 表示入口文件
    entry: "./app.js",// 表示输出文件
    output: {
        path: __dirname,filename: "bundle.js"
    },// 表示这个依赖项是外部lib,遇到require它不需要编译,
    // 且在浏览器端对应window.React
    externals: {
      'react': 'window.React'
    },// 凡是遇到jsx结尾的,都用jsx-loader这个插件来加载,
    // 且启用harmony模式
    module: {
        loaders: [
            { test: /\.js/,loader: "jsx-loader?harmony" }
        ]
    }
};

再执行一下webpack,整个世界都好了。

而且webpack还自带watch功能,只需要webpack --progress --colors --watch就能看到带进度,带颜色的输出了。

最后在packages.json中的scripts下加上

"pack": "webpack --progress --colors --watch"

从此就只用输入npm run-script pack来执行喽。

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...