excite advent calender 2016 12/12用素材

envinfo.js

var process = require("process");

var result = {
    env: process.env.BUILD_ENV,
    filename: '[name]-[hash].js',
    chunkFilename: '[name]-[chunkhash].js',
    cssName: '[name]-[hash].css',
    sassOptions: "?outputStyle=compressed"
};
switch (process.env.BUILD_ENV) {
    case 'live':
        result.publicPath = '/path/to/public/'; // Live環境用ビルドのときはcdnなどのパスを指定します。
        break;
  
    default: 
        result.publicPath = '/assets/';
        result.filename = '[name].js';
        result.chunkFilename = '[name].js';
        result.cssName = '[name].css';
        result.sassOptions = "?outputStyle=nested";
        break;
}

module.exports = result;

package.json

 // package.jsonのdependenciesを一部抜粋
  "dependencies": {
    "babel-cli": "^6.7.5",
    "babel-core": "^6.7.6",
    "babel-eslint": "^6.0.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "bootstrap-loader": "^1.0.10",
    "bootstrap-sass": "^3.3.6",
    "clean-webpack-plugin": "^0.1.8",
    "css-loader": "^0.23.1",
    "eslint": "^2.7.0",
    "eslint-loader": "^1.3.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "imports-loader": "^0.6.5",
    "jquery": "^2.2.3",
    "node-sass": "^3.4.2",
    "resolve-url-loader": "^1.4.3",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.15"
  }

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");

// webpackのコンパイル時の環境によって値を差し替えるために使っています。
var envinfo = require("./assets/envinfo");
var myPlugins = [
    // 分割する時に共通のライブラリをまとめてくれます
    new webpack.optimize.CommonsChunkPlugin({
        name:      'vendor', // Move dependencies to our vendor file
        children:  true, // Look for common dependencies in all children,
        minChunks: 2, // How many times a dependency must come up before being extracted
    }),
    // cssをファイルとして出力する
    new ExtractTextPlugin(envinfo.cssName)
];
if (envinfo.env && envinfo.env != "dev") {
    myPlugins = myPlugins.concat([
            // js圧縮
            new webpack.optimize.UglifyJsPlugin({}),
            // clean up build folder before compile
            new CleanWebpackPlugin(['htdocs/assets'])
    ]);
}

module.exports = {
    entry: {
        index: ["./assets/index.js", "bootstrap-loader/extractStyles"] // bootstrapのcssを読み込ませてます。
    },
    output: {
        filename: envinfo.filename,
        chunkFilename: envinfo.chunkFilename,
        path: __dirname + '/htdocs/assets', // 出来たファイルの出力先
        publicPath: envinfo.publicPath // ブラウザ側でアクセスされるときのpath
    },
    module: {
        preLoaders: [
            // jsのsyntax check用にeslintを実行
            {
                test: /\.js$/,
                loader: 'eslint'
            }
        ],
        loaders: [
            // ./assets/es6/配下のjsはbabelでEcmaScript2015(es6)としてloadする
            // @see https://github.com/babel/babel-loader
            {
                test: /\.js$/,
                include: __dirname + "/assets/es6",
                loader: "babel",
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.scss$/,
                // node-sassのオプションをクエリで指定
                loader: ExtractTextPlugin.extract("style", "css!sass" + envinfo.sassOptions)
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style", "css")
            },
            // 10kb以下の画像はdata-url形式になる
            {
                test:   /\.(png|gif|jpe?g|svg)$/i,
                loader: 'url?limit=10000'
            },
            // for bootstrap-loader
            // Use one of these to serve jQuery for Bootstrap scripts:
            // Bootstrap 3
            { test:/bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
            {
                test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
                loader: "url?limit=10000"
                //loader: "url"
            },
            {
                test: /\.(ttf|eot)(\?[\s\S]+)?$/,
                loader: 'file'
            },
        ]
    },
    plugins: myPlugins
}