レガシーなプロジェクトのJavascriptとCSSに対してwebpackを使う

レガシーなのでCSSは純粋なCSSとして出力したい

ExtractTextPluginを使います。

  module: {
    loaders: [{
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'css-loader?-url&minimize!sass-loader?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib') + '&includePaths[]=' + path.resolve(__dirname, './node_modules')),
    }, ],
  },

みたいにすることでcssファイルとして出力されます。

minify化する場合には「css-loader?-url&minimize」のようにします。

「-url」はURLのパス解決のおせっかい機能をOFFにする場合に指定します。

レガシーに「compass-mixins」を使っている場所がある場合にはincludePathsで指定をします。

pluginsで以下のように指定することでファイルを別々のCSSファイルとして出力することができます。

  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),
  ],

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様