如何在CircleCI配置中运行webpack编译

Question

我希望将未编译的文件保存到Github，并让CircleCI稍后运行webpack进行编译。但是我似乎无法做到这一点...

machine:
  node:
    version: 5.10.1

dependencies:
  override:
    - npm install
    - npm install webpack -g
    - webpack

test:
  override:
    - npm test

deployment:
  staging:
    branch: master
    heroku:
      appname: heroku-app-123

Webpack似乎已经运行，因为我在CircleCI中看到了以下输出：

哈希值：db00c1

e4b7e0aa25c885
Version: webpack 1.12.14
Time: 10581ms
              Asset     Size  Chunks             Chunk Names
 /images/iphone.png  79.9 kB          [emitted]  
/images/macbook.png   117 kB          [emitted]  
   /images/temp.png  16.1 kB          [emitted]  
          bundle.js  2.38 MB       0  [emitted]  main
          style.css  19.9 kB       0  [emitted]  main
   [0] multi main 52 bytes {0} [built]
...

不幸的是，当部署时没有任何内容被渲染，这告诉我webpack实际上并没有运行。如果我在本地运行命令webpack并推送到Github，一切都正常，但我不想要依赖于我记得在推送之前编译应用程序。

我的webpack编译步骤是否放错了位置？我该如何解决这个问题？

我的webpack.config.js文件看起来像这样：

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var autoprefixer = require('autoprefixer')

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './app/index'
  ],
  output: {
    path: path.join(__dirname, 'static'),
    filename: 'bundle.js',
    publicPath: ''
  },
  plugins: [
    new ExtractTextPlugin('style.css', {
      allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: /node_modules/,
        include: path.join(__dirname, 'app')
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'file?name=/images/[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: [ '', '.js', '.scss' ],
    modulesDirectories: [ 'app', 'node_modules' ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

- samcorcos

---

你的webpack.config.js文件是什么样子的？ - Sean Larkin

@SeanLarkin 已更新配置文件。 - samcorcos

Herkoku是否知道如何使用您的webpack构建命令？此外，如果您想使用Heroku构建应用程序，您还应该了解它将构建到哪里以及该位置是否是您正在使用的任何Web服务器的正确位置。 - Sean Larkin

我不确定它是否知道如何构建。我告诉它在“依赖项”步骤中进行构建，并记录了一些内容，所以我认为它正在构建。话虽如此，捆绑包似乎从未改变过。这可能是一个简单的配置问题，但我还没有找到它的根源。 - samcorcos

这个问题有任何新进展吗？我正在考虑在一个项目中使用CircleCI，但如果webpack不能正常工作，那就不行了。 - John P

@JohnP 啊，是的，我解决了。会更新答案。 - samcorcos

Answer 1

答案是在部署过程中运行webpack构建，像这样：

...

deployment:
  aws:
    branch: master
    commands:
      - chmod +x deploy.sh
      - webpack --config webpack.prod.config.js
      - ./deploy.sh

- samcorcos