So führen Sie die Webpack-Kompilierung als Teil der CircleCI-Konfiguration aus

Question

Ich möchte meine nicht kompilierten Dateien in Github speichern und CircleCI webpack ausführen, um sie später zu kompilieren. Ich kann nicht scheinen, dies zu funktioniert ...

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 zu haben scheint zu laufen, weil ich die folgende Ausgabe in CircleCI:

Hash: 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] 
... 

Aber leider, wenn es eingesetzt wird, wird nichts gerendert, was mir sagt, dass Webpack nicht wirklich ausgeführt wurde. Wenn ich den Befehl webpack lokal ausführe und zu Github drücke, funktioniert alles gut, aber ich möchte mich nicht darauf verlassen müssen, dass ich mich daran gewöhne, meine App zu kompilieren, bevor ich drücke.

Ist mein Webpack-Übersetzungsschritt einfach am falschen Ort? Wie löse ich das?

Meine webpack.config.js Datei sieht wie folgt aus:

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

Answer 1

Die Antwort ist Ihre webpack Build während des Einsatzes zu laufen, etwa so:

... 

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