如何運行webpack編譯作爲CircleCI配置的一部分

我想將我的未編譯文件保存到Github並稍後使用CircleCI運行webpack進行編譯。我似乎無法得到這個工作...如何運行webpack編譯作爲CircleCI配置的一部分

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'] }) ] 
}

來源

2016-04-08 samcorcos

什麼是您的webpack.config.js樣子？ –

@SeanLarkin更新了配置文件。 – samcorcos

Herkoku知道使用您的webpack構建命令嗎？此外，如果您想使用Heroku構建您的應用，您還應該知道它將構建到何處，以及該地點是否適合您使用的任何Web服務器。 –

答案是在部署期間運行的WebPack身材，就像這樣：

... 

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

來源

2016-08-24 15:23:04 samcorcos

如何運行webpack編譯作爲CircleCI配置的一部分

回答

相關問題