Skip to content

Instantly share code, notes, and snippets.

@yuroyoro
Created February 15, 2017 02:16
Show Gist options
  • Save yuroyoro/221224204f65d8e3fddaf293e5571265 to your computer and use it in GitHub Desktop.
Save yuroyoro/221224204f65d8e3fddaf293e5571265 to your computer and use it in GitHub Desktop.
webpakcer.gemにscssのビルドを加えて、大きめの依存ライブラリを別ファイルに分けて吐くようにしたwebpack.cnofig
// Note: You must restart bin/webpack-watcher for changes to take effect
var path = require('path')
var webpack = require('webpack')
var merge = require('webpack-merge')
var config = require('./shared.js')
var devconfig = {
devtool: 'sourcemap',
stats: {
errorDetails: true
},
output: {
pathinfo: true
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
})
]
}
module.exports = [merge(config[0], devconfig), merge(config[1], devconfig)]
// Note: You must restart bin/webpack-watcher for changes to take effect
var path = require('path')
var webpack = require('webpack')
var merge = require('webpack-merge')
var config = require('./shared.js')
module.exports = [
merge(config[0], {
output: { filename: '[name]-[hash].js' },
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true
})
]
}),
merge(config[1], {
output: { filename: '[name]-[hash].css' },
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true
})
]
})
]
// Note: You must restart bin/webpack-watcher for changes to take effect [91/9220]
var webpack = require('webpack')
var merge = require('webpack-merge')
var path = require('path')
var glob = require('glob')
var extname = require('path-complete-extname')
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = [{
entry: merge(
glob.sync(path.join('..', 'app', 'javascript', 'packs', '**', '*.js*')).reduce(
function(map, entry) {
var relpath = path.relative(path.join('..', 'app', 'javascript', 'packs'), entry);
var basename = path.basename(relpath, extname(relpath));
var dirname = path.dirname(relpath);
if(dirname != ".") {
basename = path.join(dirname, basename)
}
map[basename] = entry
return map
}, {}
),
{
// libraries js file
vendors: [
'jquery',
'datatables.net',
'datatables.net-bs',
"moment",
"bootstrap-sass",
"bootstrap-datepicker",
"urijs",
]
}
),
output: { filename: '[name].js', path: path.resolve('..', 'public', 'packs') },
module: {
rules: [
{ test: /\.coffee(.erb)?$/, loader: "coffee-loader" },
{
test: /\.js(.erb)?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[ 'latest', { 'es2015': { 'modules': false } } ]
]
}
},
{
test: /.erb$/,
enforce: 'pre',
exclude: /node_modules/,
loader: 'rails-erb-loader',
options: {
runner: 'DISABLE_SPRING=1 ../bin/rails runner'
}
},
]
},
plugins: [
// take the vendors chunk and create a vendors.js from the "vendors" in entry section.
new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js'}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
_: 'underscore',
moment: 'moment',
urijs: "urijs",
})
],
resolve: {
extensions: [ '.js', '.coffee' ],
modules: [
path.resolve('../app/javascript'),
path.resolve('../vendor/node_modules')
]
},
resolveLoader: {
modules: [ path.resolve('../vendor/node_modules') ]
}
}, {
// css
entry: glob.sync(path.join('..', 'app', 'scss', 'packs', '**', '*.scss.js')).reduce(
function(map, entry) {
var relpath = path.relative(path.join('..', 'app', 'scss', 'packs'), entry);
console.log(entry)
console.log(relpath)
var basename = path.basename(relpath, '.scss.js');
var dirname = path.dirname(relpath);
if(dirname != ".") {
basename = path.join(dirname, basename)
}
console.log(basename)
map[basename] = entry
return map
}, {}
),
output: { filename: '[name].css', path: path.resolve('..', 'public', 'packs') },
module: {
rules: [
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
use: 'file-loader'
},
{
test: /\.(jpg|gif|png)$/,
use: 'url-loader'
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
'css-loader?sourceMap',
'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true',
// 'css-loader',
// 'sass-loader',
]
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
],
resolve: {
extensions: [ '.scss'],
modules: [
path.resolve('../app/scss'),
path.resolve('../vendor/node_modules')
]
}
}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment