简介

最近在学习 React 以及其生态产品，在为开发的一个 Electron 应用搭建一套自己熟悉的构建工具。

项目地址: Electron-React-Webpack-Boilerplate

使用它提升了开发效率，完成了StarCabinet - 一个开源的 Github Stars 管理工具

Webpack

我使用了 Webpack 作为模块加载和编译打包的主力，配合各种 loaders。 Webpack 的配置文件分为开发版本和生产版本，共同的部分抽离到 base config 中。

注意点 1

 node: {
		__filename: false,
		__dirname: false
  }

上面的配置是在编译时保留__filename和__dirname，因为 Electron 运行的 NodeJS 脚本，需要在运行时去解析这个全局变量，如果编译时，会导致解析错误。

注意点 2

target: 'electron-renderer'

这里涉及到 JavaScript 的模块化规范比较多的问题，包括 CommonJS，AMD 等，我使用electron-renderer，这样 webpack 编译时会做区分，为渲染进程运行的 JS 提供必要插件以使之在浏览器运行，同时也提供插件给主进程的 JS 使之在 Node 环境下顺利执行。

Webpack1 关于此的文档: Webpack1 Target

Webpack2 关于此的文档: Webpack2 Targets

注意点 3

Webpack 的各种 loader，最好使用全名，比如 babel 使用全名 babel-loader。 举个错误的例子：npm 有个包 json-loader，也有个包就叫 json，如果你的 json-loader 写成 json，Webpack 会先选择全字匹配的 json 包作为 loader，当然这会报错。

注意点 4

为各个 entry 添加babel-polyfill。

因为即使我们写的代码并没有使用 ES6/ES7 草案级的规范语法，但是引用的包可能会。比如Object.entries这个 ES7 的草案规范语法。需要babel-polyfill来转译成可 ES5 识别的语法。

CSS 模块

关于 CSS 模块可阅读文章CSS Modules 详解及 React 中实践

这里的问题是，有的 class 我并不需要 css 模块，所以在 webpack 的 css loader 里面，我配置了两项，分别针对 global 的样式和 React 组件内部需要模块化的样式。

{
        test: /\.css$/,
        include: [/global/, /node_modules/],
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap!postcss-loader'})
      },
      {
        test: /\.css$/,
        exclude: [/global/, /node_modules/],
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'})
}

Less 或 Sass 同理。

其他

直接参考仓库中Wepack configs