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

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

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

How to run webpack compilation as part of CircleCI configuration

circleci

webpack

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

How to run webpack compilation as part of CircleCI configuration

circleci

webpack

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