rails + webpack
function requireAll(r) { r.keys().forEach(r); } | |
requireAll(require.context('../images/', true, /\..*$/)); | |
requireAll(require.context('./vendors/', true, /\..*$/)); |
module AssetsHelper | |
def stylesheet_link_tag(*sources) | |
sources = get_assets_sources(sources, 'css') | |
super(*sources) | |
end | |
def javascript_include_tag(*sources) | |
sources = get_assets_sources(sources, 'js') | |
super(*sources) | |
end | |
private | |
def assets_manifest | |
manifest_file = Rails.root.join('public','assets','manifest.json') | |
JSON.load(manifest_file) | |
end | |
def get_assets_sources(sources, ext) | |
sources = sources.uniq.map do |source| | |
if source.is_a?(String) | |
source += ".#{ext}" unless source =~ /\.#{ext}\z/ | |
path = assets_manifest[source] | |
if path | |
"/assets/#{path}" | |
else | |
raise "Cant get #{source}" | |
end | |
else | |
source | |
end | |
end | |
end | |
end |
{ | |
"name": "sharefoldr.io", | |
"version": "0.0.1", | |
"private": true, | |
"dependencies": { | |
"async": "^1.3.0", | |
"babel-core": "^5.0.12", | |
"babel-loader": "^5.0.0", | |
"body-parser": "^1.9.3", | |
"css-loader": "^0.14.0", | |
"style-loader": "^0.12.3", | |
"express": "^4.7.2", | |
"extract-text-webpack-plugin": "^0.8.2", | |
"file-loader": "^0.8.1", | |
"html-loader": "^0.3.0", | |
"items-store": "^0.7.0", | |
"markdown-loader": "^0.1.2", | |
"null-loader": "^0.1.0", | |
"react": "^0.13.1", | |
"react-hot-loader": "^1.0.0", | |
"react-proxy-loader": "^0.3.1", | |
"react-router": "^0.13.2", | |
"stats-webpack-plugin": "^0.1.2", | |
"style-loader": "^0.12.0", | |
"superagent": "^1.1.0", | |
"url-loader": "^0.5.5", | |
"uuid": "^2.0.1", | |
"webpack": "^1.10.1", | |
"webpack-dev-server": "^1.10.1", | |
"sass-loader": "^1.0.2", | |
"react-semantify": "^0.3.1", | |
"webpack-manifest-plugin": "^0.3.0", | |
"chunk-manifest-webpack-plugin": "^0.0.1" | |
}, | |
"devDependencies": { | |
"babel-eslint": "^3.0.1", | |
"eslint": "^0.22.0", | |
"eslint-plugin-react": "^2.2.0" | |
} | |
} |
var webpack = require("webpack"); | |
var ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
var ManifestPlugin = require('webpack-manifest-plugin'); | |
var contextPath = __dirname + '/app/assets/javascripts'; | |
module.exports = { | |
context: contextPath, | |
entry: { | |
application: './application.js', | |
//用來確保所有的圖片跟 vendors js 都會被打上 digest | |
static_resource: './static_resources.js', | |
}, | |
output: { | |
filename: '[name].[hash].js', | |
path: __dirname + '/public/assets', | |
publicPath: "/assets/" | |
}, | |
module: { | |
loaders: [ | |
{ test: /vendors/, exclude: /node_modules/, loader: 'file-loader?name=[path][name].[hash].[ext]'}, | |
{ test: /\.jsx?$/, exclude: /(node_modules|vendors)/, loaders: ['react-hot', 'babel'] }, | |
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, | |
{ test: /\.png$/, loader: "url-loader?limit=100000&name=[name].[hash].[ext]" }, | |
{ test: /\.jpg$/, loader: "file-loader?name=[name].[hash].[ext]" }, | |
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, | |
loader: "url-loader?limit=10000&minetype=application/font-woff&name=[name].[hash].[ext]", | |
}, | |
{ test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, | |
loader: "file-loader?name=[name].[hash].[ext]", | |
}, | |
{ test: /\.scss$/, loader: ExtractTextPlugin.extract( | |
// activate source maps via loader query | |
'css?sourceMap!' + | |
'sass?sourceMap' | |
) } | |
], | |
noParse: [ | |
/[\/\\]vendors[\/\\].*\.js$/ | |
] | |
}, | |
resolve: { | |
extensions: ['', '.js', '.jsx'], | |
modulesDirectories: ["node_modules", "javascripts"], | |
}, | |
externals: { | |
"react": 'React', | |
"react/addons": "React", | |
"jquery": 'window.jQuery', | |
semantic: 'semantic' | |
}, | |
devtool: "sourcemap", | |
plugins: [ | |
new ExtractTextPlugin("[name].[hash].css", { | |
disable: false, | |
allChunks: true | |
}), | |
new webpack.ProvidePlugin({ | |
$: "jquery", | |
jQuery: "jquery", | |
"window.jQuery": "jquery", | |
React: 'react' | |
}), | |
// 生成 manifest.json, imageExtensions 這邊用來處理 static resource | |
new ManifestPlugin({ | |
imageExtensions: /^(jpe?g|png|gif|svg|woff|woff2|otf|ttf|eot|svg|js)(\.|$)/i | |
}) | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment