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

Answer 1

答案是在部署期间运行您的webpack构建，如下所示：

...

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

如何作为CircleCI配置的一部分运行webpack编译

1 个答案: